Vue 计算属性（computed）学习

1.基础例子：

<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:{  
    //a computed getter  
    reversedMessage:function(){  
      //'this' points to the vm instance  
      return this.message.split('').reverse().join('')  
    }  
  }  
})

 

这里我们声明了一个计算机属性reversedMessage，我们提供的函数将用作属性vm.reversedMessage的getter。

2.setter（动态更新message属性的值）：
计算属性默认只有getter，不过在需要是可以提供一个setter：

computed: {  
  fullName: {  
    // getter  
    get: function () {  
      return this.firstName + ' ' + this.lastName  
    },  
    // setter  
    set: function (newValue) {  
      var names = newValue.split(' ')  
      this.firstName = names[0]  
      this.lastName = names[names.length - 1]  
    }  
  }  
}

 

在运行vm.fullName = 'John Doe'时，setter会被调用，vm.firstName和vm.lastName  也相应的会被更新。