单击循环后如何更改颜色？

Question

我有如下循环：

data: {
  show: false
}

.test {
  hight: 10px;
  background-color: red;
}

.test2 {
  hight: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div v-for="value in data" :key="value.id">
  <div class="test" v-bind:class="{ test2: show }" v-on:click="show = !show">
  </div>
</div>

现在，如果我单击任何div，它将把所有div的高度从15更改为10或将10更改为15。

但是，我只想更改单击的div。我该怎么办？

Answer 1

您需要为每个元素添加show变量：

Answer 2

您仅使用一个变量来控制每个项目的类，要进行更具体的更改，您应该为每个项目都具有一个变量。

Answer 3

您可以使用一种方法来设置所需的类。

如果运行v-on:click="myFunc()"，将得到一个事件，可用于更改特定元素。

Answer 4

首先，哪个是正确的？哪一个有效？我也有这个疑问