处理v-if与v-for同步执行的小技巧

why?

大家好,我是大庆庆,该系列只是我空闲时间记录的一些项目里我用着感觉不错的小技巧,欢迎大家提出更好的解决方法和建议

不推荐将v-for和v-if添加在同一个元素上,因为v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。

How?

1.this.dataList为从后端动态获取来的数组对象,用计算属性的特性,过滤出自己需要的展示的数据

// 计算属性
computed: {
  filterList: function () {
  return this.dataList.filter(function (data) {
    return data.isShow
  })
}

2.正常渲染数组

// template
<ul>
  <li v-for="item in filterList" :key="item.id">
  {{ item.name }}
  </li>
</ul>

当你需要进行同步指令的时候。尽量使用计算属性，先将 v-If 不需要的值先过滤掉。