假设有如下数组,需要将数组中的num渲染至页面中,同时遵循条件:对应的show值为true才渲染,为false就不渲染。
numArr: [
{ id: 'NUM1', num: 1, show: true },
{ id: 'NUM2', num: 2, show: false },
{ id: 'NUM3', num: 3, show: true },
{ id: 'NUM4', num: 4, show: true },
{ id: 'NUM5', num: 5, show: false },
{ id: 'NUM6', num: 6, show: true },
{ id: 'NUM7', num: 7, show: false },
{ id: 'NUM8', num: 8, show: true }
]
常规写法就是在v-for里直接加v-if做判断,show值为true才渲染
<ul>
<li v-for="item in numArr" :key="item.id" v-if="item.show">{{ item.num }}</li>
</ul>
此时,能达到预期效果,能正常渲染,但同时会报一个错:
[vue/no-use-v-if-with-v-for]
The ‘numArr’ variable inside ‘v-for’ directive should be replaced with a computed property that returns filtered array instead. You should not mix ‘v-for’ with ‘v-if’.
不一定每个版本的vue都会报这个错,如果装了代码检查插件eslint的话,编辑器也会提醒:
这段话翻译过来,核心意思就是:不要在v-for里面使用v-if,应该用computed来返回符合条件的数据再渲染。
经查阅可知:v-for 比 v-if 优先级高。
好吧,这句话看不懂,说人话就是我 v-for 比你 v-if 霸道,一起使用的时候,我 v-for 不管你 v-if 里面的值是 true 还是 false,我一律先 v-for 了再说,然后我再根据你 v-if 里的值来最终确定是否渲染到dom里面去。
vue是追求极致性能的,必然是忍受不了,所以会报错。
那么,该如何真正做到先判断 show 值再渲染,做到最优性能呢?报错信息里已经给了答案,就是用 computed 先把原数组处理了,过滤掉 show 值为 fasle 的元素,只留下 show 值为 true 的元素,再来渲染,此时就真的只渲染该渲染的了,这样就很好的取代了 v-if ,实现就是如下:
// html
<ul>
<li v-for="item in showNum" :key="item.id">{{ item.num }}</li>
</ul>
// js
computed: {
showNum() {
let showArr = this.numArr.filter(arr => {
return arr.show
})
return showArr
}
}
一句话日记:写是外功,理解是内功