vue--computed

-类型: { [key: string]: Function | { get: Function, set: Function } }

详细:

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意，不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
(以上为官网解释)

然后通过今天的项目实例 联系一下computed的实时计算

1.计算目的如图

图中的前五个是一组json数据，添加新地址是另外加入的标签，所以之后提到的数字等描述均不包括此标签

2.图中的list一共为6个（不算‘添加新地址’），首先，我想先将list变为三个，剩下的隐藏，这是我们可以使用computed方法
html代码

<!--引用computed中的函数-->
 <li  v-for="(item,index) in filterAddressList">
 <!--此处调用的json数据-->
      <dl>
      <dt>{{item.userName}}</dt>
      <dd class="address">{{item.streetName}}</dd>
      <dd class="tel">{{item.tel}}</dd>
      </dl>
 </li>

js代码

computed:{
      filterAddressList:function () {
      //返回数值--用slice方法姜将list变为三个
          return this.addressList.slice(0,3);
      }
    },

效果如图

3.然后我们通过点击more链接，实现将隐藏的list显示出来
js

data:{
      limitNum:3,
      addressList:[]
   },
computed:{
      filterAddressList:function () {
          return this.addressList.slice(0,this.limitNum);
      }
    },
methods:{     
    loadMore:function () {
          var _this=this;
          if(this.limitNum==3){
              _this.limitNum=_this.addressList.length;
          }
        }    
      }  

我们通过limitNum的动态变化，就实现对list的切换