v-for循环 根据条件控制显示或隐藏

根据每个值或者某个条件显示或者隐藏循环出来的div

方法一：

根据想控制div的索引使用v-show 在加上控制条件判断 使用||

<template>
  <div id="app">
    num的值：{{ num }}
    <button @click="num == 0 ? (num = 1) : (num = 0)">点我改变num</button>
    <div v-for="(item, index) in data" :key="index">
      <span v-show="index !== 4 || num == '0'">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      num: 0,
      data: [
        { name: 1 },
        { name: 2 },
        { name: 3 },
        { name: 4 },
        { name: "根据num决定显示还是隐藏" },
      ],
    };
  },
};
</script>

方法二：

根据判断值来选择循环哪个数组 从而达到效果

<template>
  <div id="app">
    num的值：{{ num }}
    <button @click="num == 0 ? (num = 1) : (num = 0)">点我改变num</button>
    <div v-for="(item, index) in num == 0 ? data : data2" :key="index">
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      num: 0,
      data: [
        { name: 1 },
        { name: 2 },
        { name: 3 },
        { name: 4 },
        { name: "根据num决定显示还是隐藏" },
      ],
      data2: [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }],
    };
  },
};
</script>

num为0时显示最后一个div

num为1时隐藏最后一个div