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

我的循环如下：

数据：{
节目：假
}

.test{
高：10px；
背景色：红色；
}
.test2{
高：15px；
}

现在，如果我单击任何

div

，它将更改所有div的高度，从15更改为10或从10更改为15

---

但是，我只想更改我单击的

div

。如何执行此操作？

您需要为每个元素添加

show

变量：

newvue({
el:“应用程序”，
数据：{
显示：[]，
项目：[]
},
创建（）{
fakeFetch（）。然后（（项）=>{
这个项目=项目；
this.show=this.items.map（（）=>false）；
});
},
方法：{
伊肖恩（一）{
归还这个。显示[i]
},
变革秀（一）{
Vue.set（this.show，i，！this.show[i]）；
}
}
})
函数fakeFetch（）{
返回新承诺（（解决、拒绝）=>{
让count=Math.floor（Math.random（）*20）+1；
让结果=[]；
for（设i=0；i

.test{
高度：10px；
背景色：红色；
利润率：10px；
}
.test2{
高度：35px；
}

项目：

您只使用一个变量来控制每个项目的类别，要启用更具体的更改，您应该为每个项目设置一个变量

如果您可以控制正在显示的数据，则可以这样声明它

data: {
  items: [{id: 1, visible: false},
          {id: 2, visible: false},
          {id: 3, visible: false}]
}

并更改可见属性，而不是全局

show

变量

如果您不是，您可能需要考虑通过计算属性

建立它。

---

您可以在此代码笔上检查此解决方案。您可以使用方法设置所需的类

如果运行

v-on:click=“myFunc（）”

将获得一个事件，可用于更改特定元素

methods: {
  myFunc (event) {
    event.target.classList.toggle("test2")
  }
}

---

您可以简单地设置活动变量，并绑定类（若它等于当前按钮索引）

<div v-for="(value, index) in data" :key="index">
  <div class="some-class" :class="{'active-class': index === active}" @click="active=index"></div>
</div>

.....

 data: function () { 
  return { 
    active: undefined
  }
 }

.....
数据：函数（）{
返回{
活动：未定义
}
}

Tks。问题是我必须在mounted中获取数据，所以我不能编写类似于thatTks的项目。问题是我必须在mounted中获取数据，所以我不能像这样编写项目that@hayumikuran在获取数据后，您也可以在

mounted

hook中准备

show

数组。您能为我解释一下this.items.map（（）=>false）的用法吗？什么是（），我可以将其重新计算为其他值（如“a”、“b”…）不，我不能，因为我不知道这些项有多少值或类似的值that@hayumikuran此行仅创建与项长度相同的数组。我更新了答案中的示例，使用了假抓取项。