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

解决方案

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

这篇关于vue.js - vue里面关于数据的一些问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！