基础案例:
<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: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
运行结果:Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数:
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
你可以打开浏览器的控制台,自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
computed:{
...mapGetters(["modaldelmodal"]),
modaldelmodal: {
get: function () {
return this.$store.state.modaldel.modaldelmodal
},
set: function (newValue) {
this.$store.state.modaldel.modaldelmodal = newValue
}
}
},
什么时候用setter呢?举个例子,比如说一个删除模态框。它有确认和取消两个按钮。我们要更改模态框的显示隐藏状态的时候,你如果,只写getter,它会报错。那么,在我们要重新赋值给“modaldelmodal”的时候,就需要写setter重新给他赋值了。