computed中get和set方法

getter

getter方法,用于返回当前computed属性的属性值

一般使用普通函数来作为回调函数

<script>
export default {
  ...
  computed: {
    // 获取全选状态
    // 函数写法 ,简单写法 默认:只执行一次getter计算
    chooseAll :function () {
      return this.list.every(item => item.goods_checked === true)
    }
  }
}
 </script> 

如果使用箭头函数,会改变this指向,因为计算属性得到的结果一般都是通过对一些其他数据进行操作后得到的结果,所以如果改变this指向,在取值时会有很大麻烦

<script>
export default {
  ...
  computed: {
    chooseAll : () =>{
      console.log(this); // undefined
      return this.list.every(item => item.goods_checked === true)
    }
  }
}
 </script> 

setter

setter方法,用于对计算属性所得到的结果进行操作,计算属性默认只有getter,不过在需要时你也可以提供一个setter

setter方法的回调函数,我们也选择用普通函数(理由同上)

setter方法的回调函数中会返回一个参数,是我们getter方法得出的结果

<script>
export default {
  ...
   computed: {
   // 对象写法,完整写法 setting, 适用于可以进行数据双向绑定(v-model)的组件或标签(input,textarea)
      chooseAll: {
        get () {
          return this.list.every(item => item.goods_checked === true)
        },
        set (newval) {
          console.log(newval)
          this.list.forEarch(item => item.goods_checked = newval)
        }
      }
   }  
}
 </script> 

注意:完整写法中 setting, 适用于可以进行数据双向绑定(v-model)的组件或标签(input,textarea)

posted @ 2022-08-25 11:18  丫丫learning  阅读(4354)  评论(0编辑  收藏  举报