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的切换