Vue中如何无需为每个列表项加v-if即可实现点击显示后续项？

给你几个不用为每个Item1之后的列表项单独加v-if的实现思路：

1. 用<template>包裹后续项，单次绑定条件 #

把Item1之后的所有列表项放到<template>标签里（不会生成额外DOM节点），只给这个容器加一次v-if，就能批量控制显示：

<div @click="showItemBtn">
  <ul>
    <li>Item1</li>
    <template v-if="showItem">
      <li>Item2</li>
      <li>Item3</li>
    </template>
  </ul>
</div>

<script>
export default {
  data() {
    return {
      showItem: false
    }
  },
  methods: {
    showItemBtn() {
      this.showItem = true
    }
  }
}
</script>

2. CSS类结合动态绑定，无侵入控制显示 #

通过给<ul>绑定动态类，利用CSS选择器默认隐藏第一个之后的项，点击后切换类来显示，完全不用给列表项加指令：

<div @click="showItemBtn">
  <ul :class="{ 'show-rest': showItem }">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>

<script>
export default {
  data() {
    return {
      showItem: false
    }
  },
  methods: {
    showItemBtn() {
      this.showItem = true
    }
  }
}
</script>

<style scoped>
/* 默认隐藏第一个li之后的所有项 */
ul li:nth-child(n+2) {
  display: none;
}
/* 触发后显示 */
ul.show-rest li:nth-child(n+2) {
  display: list-item;
}
</style>

3. 动态数据场景：数组切片批量渲染 #

如果列表是基于数组数据生成的，直接通过数组切片控制后续项的渲染，不用手动写每个li：

<div @click="showItemBtn">
  <ul>
    <!-- 固定显示第一个元素 -->
    <li>{{ list[0] }}</li>
    <!-- 点击后渲染剩余元素 -->
    <li v-for="(item, index) in showItem ? list.slice(1) : []" :key="index">
      {{ item }}
    </li>
  </ul>
</div>

<script>
export default {
  data() {
    return {
      showItem: false,
      list: ['Item1', 'Item2', 'Item3']
    }
  },
  methods: {
    showItemBtn() {
      this.showItem = true
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Cphml444