Vue：v-text标签换行显示问题

Question

在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是否可以实现各种换行符号对应

Answer 1

网页中换行一般用<br>标签；当然也可以用<pre>保留原有文本格式，或是直接用css控制

Answer 2

这个跟系统无关吧。。
你试试message改成这个就知道了。
message: ‘这是第一行/rn这是第二行/n 这是第三行/r这是第四行’
你这个换行用v-html就行了。

<p v-html="text"></p>
data () {
return {
  text:'这是第一行<br/>这是第二行<br/> 这是第三行'
  }

}

Answer 3

因为没太多时间,所以做了一个共同方法用来置换字符串里面的换行符.很遗憾没有用Vue解决这种问题

    <cffunction name="ConvertJSON_outer" access="public" returntype="any" hint="">
        <cfargument name="param" type="string" required="yes" default="" hint="" />
        
        <cfscript>
        var result = arguments.param;
        result = Replace(result, "\r\n" ,"\n", "all");//windows
        result = Replace(result, "\r" ,"\n", "all");//centos
        </cfscript>
        
        <cfreturn result />
    </cffunction>