vue的计算属性

基础案例：

<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重新给他赋值了。

猜你喜欢