Vue计算属性

1、常用方法，对data数据进行逻辑处理

<h1>{{msg}}</h1>
<h1>{{reverseMsg}}</h1>
var vm = new Vue({
    data: { //普通属性
        msg: 'welcome to world',
    },
    computed: { //计算属性
        reverseMsg: function() {
            //可以包含逻辑处理操作，同时reverseMsg依赖于msg
            return this.msg.split(' ').reverse().join(' ');
        },
    }
});

2、计算属性还有一个set方法,通过set设置num1的值改为111，进而get方法进行监听依赖数据num1，返回num，即当前的num1-1，显示在页面上。

<h1>{{num1}}</h1>
<h1>{{num2}}</h1>
var vm = new Vue({
    data: {
        num1: -1,
    },
    computed: {
        num2: {
            get: function() {
                return this.num1 - 1;
            },
            set: function(val) {
                this.num1 = 111;
            }
        }
    }
});