vuejs如何让大括号里头的字符串换行。

Question

场景蛮简单的，一个div标签 <div>{{str}}</div>，然后str是一串文字，想让里头的文字换成多行却好像没能找到法子，加\n的话效果成了一个空格，加\r\n则变成了两个空格，加<br/>则直接被当成字符串显示了出来...
求大神指点~

Answer 1

首先{{}}叫文本插值，内部会按照普通字符串进行处理。
然后想要对str进行处理的话，建议写在计算属性里，然后元素中使用。

<div v-html="str">
//////////
data: {
        str: 'your value'
    },
computed: {
    newStr: function() {
        //对str进行操作
        return '前部分' + '<br/>' + '后部分'
    }
}

想复用的话写个添加个vue插件吧。补充一句v-html中不能用过滤器了。

Answer 2

其实有些更简单的手段，比如把字符串按换行符切分（string.split(/rn|r|n/)，然后内部用多个div显示