计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
{{msg.split("").reverse().join("") }}
</div>

，这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

<div id="example">
    <p>原来的信息: "{{ msg }}"</p>
    <p>计算翻转的信息: "{{ rmsg }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    msg: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    rmsg: function () {
    // `this` 指向 vm 实例
    return this.msg.split('').reverse().join('')
    }
  }
})

原来的信息: "hello"

计算翻转的信息: "olleh"