<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 也相应的会被更新。