vue里面关于数据的一些问题

Question

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”为什么没有生效？
另外，如果想数据中每一行的文字，都加行样式，该如何写呢？
小弟新手，求教了

Answer 1

这样试试，但是要注意避免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('');
            }
        }
    });

Answer 2

那要看你是怎么用这个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>