VUE-计算属性

模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的。
通过上一章的介绍,我们己经可以搭建出一个简单的 Vue 应用,在模板中双向绑定 些数据
或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护,比如:
<div> 
{{ text.split ( ’,’ ).reverse().join (’,’)}} 
</div>

  

computed

computed 
类型: Object 
所属对象: ComponentOptions 

参考: 
https://cn.vuejs.org/v2/api/#computed 
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 

示例: 

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

  

 

 

posted on 2021-02-08 09:49  王半仙儿的博客  阅读(77)  评论(0编辑  收藏  举报

导航