image.png
<template>
<ul>
<li v-for="color in colors"
:key="color"
v-if="color !=='red'">
{{ color }}
</li>
</ul>
</template>
<script>
export default {
name: "Test",
data() {
return {
colors: ['red', 'green', 'blue'],
}
},
}
</script>
在vue2中，不建议v-if和v-for一起使用。因为先执行v-for，循环完再执行v-if，如果发现为false，刚创建的又要删掉，会造成性能浪费、页面卡顿。最好的方法时使用计算属性来处理数据。
有的同学说可以在每层循环里利用<template><template/>标签加v-if，这个方法在有些情况下并不适合：
image.png
<template>
<ul>
<li v-for="color in colors"
:key="color"
>
<template v-if="color !=='red'">
{{ color }}
</template>
</li>
</ul>
</template>
<script>
export default {
name: "Test",
data() {
return {
colors: ['red', 'green', 'blue'],
}
},
}
</script>
可以看出，如果用v-if来过滤掉一部分数据的话，外层的结构还是会创建，并不是我们预期的效果。
在Vue3中，v-if比v-for先执行，所以可以同时使用。
