Vue3的v-for和v-if一起用的变化

lovelilt

1.作用：
v-if指令 作为一个条件渲染，当他为true的时候才会渲染出当前的节点
v-for指令 是基于一个数组来渲染列表 ，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值，而且每一个Key值都是独一无二的。
2.优先级
Vue2中v-for和v-if是可以一起用的
因为v-for的优先级比v-if的高

<div v-for="item in textValue" :key="item.text" v-if="item.show">
      {{ item.text }}
    </div>


textValue: [{ text: '宫保鸡丁', show: true },
                        { text: '黄焖鸡米饭', show: true },
                        { text: '黄焖鸡米饭', show: true },
                        { text: '重庆小面', show: false },
                        { text: '蚂蚁上树', show: true }],

Vue3中不能这样使用 但是有不想在加一个结构使自己的代码更复杂，可以在外面套一层template

<template v-for="(item) in textValue">
      <div  :key="item.text" v-if="item.show" >{{item.text}}</div>
</template>

3.注意事项
永远不要把 v-if 和 v-for 同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套 template （页面渲染不生成dom节点），再这一层进行 v-if 判断，然后再内部进行 v-for 循环

最好的写法
<template v-for="(item) in textValue">
      <div  :key="item.text" v-if="item.show" >{{item.text}}</div>
</template>

4.如果条件出现再循环内部，可通过计算属性 computed 提前过滤掉那些不需要显示的项

vue3
const dataFilter = computed(() => {
      return data.textValue.filter((res: any) => {
        return res.show !== false
    })
})