Vue.js 计算属性

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

正常情况可以这么用,但是有的时候计算太长了,不利于模板维护.这个时候,我们就可以使用计算属性了.

<div id="example">  <p>Original message: "{{ message }}"</p>  <p>Computed reversed message: "{{ reversedMessage }}"</p></div>

在底下这个例子中,{{message}}中还是正常的文本插值.但是 {{reverseMessage}}中就不再是一个vue.data中的属性了.其中存的是一个函数名.插值的结果就是函数的返回值.函数在 computed 对象中.

var vm = new Vue({  el: '#example',  data: {    message: 'Hello'  },  computed: {    // a computed getter    reversedMessage: function () {      // `this` points to the vm instance      return this.message.split('').reverse().join('')    }  }})

还可以使用watch .也就是当数据发生改变的时候,执行指定函数

<div id="watch-example">  <p>    Ask a yes/no question:    <input v-model="question">  </p>  <p>{{ answer }}</p></div><script>var watchExampleVM = new Vue({  el: '#watch-example',  data: {    question: '',    answer: 'I cannot give you an answer until you ask a question!'  },  watch: {    // 如果 question 发生改变，这个函数就会运行    question: function (newQuestion) {      //code    }  }})</script>