v-for与v-if：循环条件渲染实现

循环渲染

<template>
  <div class="test-view-wrapper">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TestView",
  data() {
    return {
      list: [
        { id: 1, text: "测试数据1" },
        { id: 2, text: "测试数据2" },
        { id: 3, text: "测试数据3" },
        { id: 4, text: "测试数据4" },
        { id: 5, text: "测试数据5" },
        { id: 6, text: "测试数据6" },
      ],
    };
  },
};
</script>

如果加上 id 为奇数的才需要渲染的条件

<template>
  <div class="test-view-wrapper">
    <ul>
      <li v-for="item in list" v-if="item.id % 2 !== 0" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

此时会报错

The 'list' 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'

可以使用 template 标签来解决问题

<template>
  <div class="test-view-wrapper">
    <ul>
      <template v-for="item in list">
        <li v-if="item.id % 2 !== 0" :key="item.id">{{ item.text }}</li>
      </template>
    </ul>
  </div>
</template>

注意：由于 template 标签不会渲染，因此 key 属性不可以写在 template 上面