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一起使用。因為先執(zhí)行v-for，循環(huán)完再執(zhí)行v-if，如果發(fā)現(xiàn)為false，剛創(chuàng)建的又要刪掉，會造成性能浪費、頁面卡頓。最好的方法時使用計算屬性來處理數(shù)據(jù)。
有的同學(xué)說可以在每層循環(huán)里利用<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來過濾掉一部分數(shù)據(jù)的話，外層的結(jié)構(gòu)還是會創(chuàng)建，并不是我們預(yù)期的效果。

在Vue3中，v-if比v-for先執(zhí)行，所以可以同時使用。