computed
用于计算复杂逻辑
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { message: 'Runoob!' },
computed: { // 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
computed VS methods
使用methods来替代computed,效果上是一样的,但是computed会被依赖缓存,只有相关依赖改变时才会重新。而使用 methods ,在重新渲染的时候,函数总会重新调用执行
computed setter
默认属性只有getter ,需要时可以提供一个setter
computed: {
site: {
// getter
get: function(){
returnthis.name + '' + this.url
},
// setter
set: function(newValue){
var names = newValue.split('')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}