var exampleVM = new Vue({
el: '#one',
data: {
name:"Hoping you take that jump '\n'But don't fear the fall Hope when the water rise You built a wall \n Hoping the crowd screams outScreaming your name",
activeColor:'red',
fontSize:30
}
});
这里的数据里面name:中的内容,在页面上为什么没有分行?换行符“/n”为什么没有生效?
另外,如果想数据中每一行的文字,都加行样式,该如何写呢?
小弟新手,求教了
那要看你是怎么用这个name
字段的了
如果真想换行的话,简单粗暴点,可以这么干:
var exampleVM = new Vue({
el: '#one',
data: {
name:"Hoping you take that jump <br/>But don't fear the fall Hope when the water rise You built a wall <br/> Hoping the crowd screams outScreaming your name",
activeColor:'red',
fontSize:30
}
});
在模版里用{{{ 变量名 }}}
引用:
<div>
{{{ name }}}
</div>
这样试试,但是要注意避免XSS攻击
<div>{{{showName}}}</div>
var exampleVM = new Vue({
el: '#one',
data: {
name: "Hoping you take that jump '\n'But don't fear the fall Hope when the water rise You built a wall \n Hoping the crowd screams outScreaming your name"
},
computed: {
showName: function () {
var arr = this.name.split('\n');
arr = arr.map(function (item, index) {
return '<p style="color: ' + (index % 2 ? 'red' : 'green' ) + ';">' + item + '</p>';
});
return arr.join('');
}
}
});