账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    Vue：v-text标签换行显示问题
    34
    0

    在Centos和Windosw不同的运行环境下,v-text换行显示异常

    目前想在ajax请求的json数据处理中,根据请求的useragent判断不同的系统,强制置换换行(这种做法虽然可以,但是不想这么做)

    Windows系统里面，每行结尾是“<回车><换行>”，即“rn”；
    Mac系统里，每行结尾是“<回车>”,即“r”。
    而UNIX/Linux采用换行符LF表示下一行，即n

    相关代码

    // <!-- お知らせダイアログ -->

                        <div data-remodal-id="dialog-info" class="dialog-default">
                        <div id="dialog-info-content" class="dialog-content">
                            <div class="dialog-header">
                                <button data-remodal-action="close" class="remodal-close"></button>
                                <h3>{{title}}</h3>
                                <dl class="list-table list-table-50">
                                    <dt>日付</dt>
                                    <dd>
                                        <time>{{item.date|formatDate}}</time>
                                    </dd>
                                    <dt>件名</dt>
                                    <dd>
                                        <p v-text="item.title" style="word-break:break-all"></p>
                                    </dd>
                                    <dt>入力者</dt>
                                    <dd>
                                        <p>{{item.author}}</p>
                                    </dd>
                                </dl>
                            </div>
                            <div class="dialog-body plane-html">
                                <div id="notice">
                                    <p style="white-space: pre-wrap; word-wrap:break-word;" v-text="item.message"></p>
                                </div>
                            </div>
                        </div>

                        <div class="dialog-btn">
                            <a href="#" data-remodal-action="close" class="btn">閉じる</a>
                        </div>
                    </div>

    上面是代码,v-text是否可以实现各种换行符号对应

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 伱上线╮想让谁看丿 普通会员 1楼

      在Vue中，v-text标签默认不会自动换行显示，你需要手动设置一个换行符来解决这个问题。

      你可以通过以下步骤设置v-text标签：

      1. 在你的组件中，将v-text标签包裹在一行文本中，例如：

      ```html

      ```

      1. 在你的组件的data属性中，定义你的message变量，例如：

      javascript data() { return { message: "Hello, World!" } }

      1. 在你的模板中，使用v-text标签来替换你的文本：

      ```html

      {{ message }}

      ```

      1. 你可以通过在模板中添加<br>标签来实现换行，例如：

      ```html

      {{ message | breakWords }}

      ```

      在这个例子中，breakWords是你的一个方法，这个方法会将message字符串中的所有连续的空格替换为换行符。

      请注意，如果你的message字符串非常大，可能需要手动设置v-text标签的行数，以避免它超出渲染区。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部