一、作用
v-if指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染
v-for指令基于一个数组来渲染一个列表。 v-for="(值,下标) in 数组" :key="下标(一般有id的就用id没有用下标)"在 v-for
的时候,建议设置key
值,并且保证每个key
值是独一无二的,这便于diff
算法进行优化
两者在用法上
<Modal v-if="isShow" />
<li v-for="(item,index) in arr" :key="index">
{{ item.label }}
</li>
二、优先级
当vue处理指令时,v-for比v-if具有更高的优先级,通过v-if移动到容器元素,不会再重复遍历列表中的每个值,取而代之的是,我们只检查它一次,且不会再v-if为否的时候运行v-for。
但是在vue3中,v-if具有比v-for更高的优先级
vue3文档中是这样写的
三、注意事项
- 永远不要把
v-if
和v-for
同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断) - 如果避免出现这种情况,则在外层嵌套
template
(页面渲染不生成dom
节点),在这一层进行v-if判断,然后在内部进行v-for循环
<template v-if="isShow">
<p v-for="item in items">
</template>
3.如果条件出现在循环内部,可通过计算属性computed
提前过滤掉那些不需要显示的项
computed: {
items: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}