一、什么是计算属性

Vue模板内的模板设计的初衷是简单计算的，在模板中放入过多的逻辑会使得模板的可读性降低以至于后期难以进行维护。

在遇到较多逻辑的时候，应该使用Vue的计算属性computed进行处理。

二、计算属性computed的使用方法

在一个计算属性里面可以完成一系列复杂的逻辑运算，以及函数调用，在最后返回一个结果即可。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了
</div>

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});