[color=red][size=medium][b]1.基础例子:[/b][/size][/color]
这里我们声明了一个计算机属性reversedMessage,我们提供的函数将[color=blue]用作属性vm.reversedMessage的getter[/color]。
[size=medium][color=red][b]2.setter(动态更新message属性的值):[/b][/color][/size]
计算属性默认只有getter,不过在需要是可以提供一个setter:
在运行vm.fullName = 'John Doe'时,setter会被调用,vm.firstName和vm.lastName 也相应的会被更新。
<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,我们提供的函数将[color=blue]用作属性vm.reversedMessage的getter[/color]。
[size=medium][color=red][b]2.setter(动态更新message属性的值):[/b][/color][/size]
计算属性默认只有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 也相应的会被更新。