Vue中点击按钮如何仅为当前点击的元素添加show类？

问题出在你用了一个全局的show变量，所有.item都绑定这个值，所以点击任意按钮都会同时切换所有区块的状态。要实现单个区块独立控制，需要给每个区块单独维护状态：

修改步骤： #

• 把data里的单个show布尔值改成数组，每个元素对应一个区块的展开状态，初始都为false。
• 让openItem方法接收当前区块的索引，只切换对应索引的状态。
• 模板里每个.item绑定对应索引的状态，点击时传递自身索引给方法。

修改后的完整代码： #

JavaScript #

export default {
  data() {
    return {
      // 用数组存储每个区块的展开状态，4个区块初始都为false
      showItems: [false, false, false, false]
    }
  },
  methods: {
    openItem(index) {
      // 只切换对应索引的状态
      this.showItems[index] = !this.showItems[index];
    }
  }
}

CSS #

.box {
  display: flex;
  gap: 12px;
}

.box-show {
  display: none
}

.item.show .box-show {
  display: block
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>

<div id="app">
  <div class="box">
    <div class="item" :class="{show: showItems[0]}">
      <button class="btn-click" @click="openItem(0)">click</button>
      <div class="box-show">content</div>
    </div>
    <div class="item" :class="{show: showItems[1]}">
      <button class="btn-click" @click="openItem(1)">click</button>
      <div class="box-show">content</div>
    </div>
    <div class="item" :class="{show: showItems[2]}">
      <button class="btn-click" @click="openItem(2)">click</button>
      <div class="box-show">content</div>
    </div>
    <div class="item" :class="{show: showItems[3]}">
      <button class="btn-click" @click="openItem(3)">click</button>
      <div class="box-show">content</div>
    </div>
  </div>
</div>

如果区块数量不固定，还可以用v-for循环渲染，更灵活：

<div id="app">
  <div class="box">
    <div 
      class="item" 
      :class="{show: showItems[index]}"
      v-for="(item, index) in 4" 
      :key="index"
    >
      <button class="btn-click" @click="openItem(index)">click</button>
      <div class="box-show">content</div>
    </div>
  </div>
</div>

对应的JS里showItems可以用Array(4).fill(false)初始化：

data() {
  return {
    showItems: Array(4).fill(false)
  }
}

内容的提问来源于stack exchange，提问作者Дмитрий Моисеев