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

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

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('');
            }
        }
    });
【热门文章】
【热门文章】