Question

我的循环如下：

<div v-for="value in data" :key="value.id">
    <div class="test"  
        v-bind:class="{ test2: show }"
        v-on:click="show = !show">
    </div>
</div>

我的CSS：

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

还有我的vuejs

data: {
  show: false
}

现在，如果我单击任何一个div，它将所有div的高度从15更改为10或从10更改为15。但我想更改单击的唯一div。我该怎么办？

谢谢！

Answer 1

您可以简单地设置活动变量，并在其等于当前按钮索引的情况下绑定类

<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
  }
 }

Answer 2

您需要为每个元素添加var scale = window.devicePixelRatio; var sourceCanvas = chartTest.chart.canvas; var copyWidth = chartTest.scales['y-axis-0'].width - 10; var copyHeight = chartTest.scales['y-axis-0'].height + chartTest.scales['y-axis-0'].top + 10; var targetCtx = document.getElementById("axis-Test").getContext("2d"); targetCtx.scale(scale, scale); targetCtx.canvas.width = copyWidth * scale; targetCtx.canvas.height = copyHeight * scale; targetCtx.canvas.style.width = `${copyWidth}px`; targetCtx.canvas.style.height = `${copyHeight}px`; targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale); var sourceCtx = sourceCanvas.getContext('2d'); // Normalize coordinate system to use css pixels. sourceCtx.clearRect(0, 0, copyWidth * scale, copyHeight * scale); rectangleSet = true;变量：

show

new Vue({
  el: "#app",
  data: {
  	show: [],
    items: []
  },
  created() {
    fakeFetch().then((items) => {
       this.items = items;
       this.show = this.items.map(() => false);
    });
  },
  methods: {
  	isShown(i) {
    	return this.show[i]
    },
    changeShow(i) {
    	Vue.set(this.show, i, !this.show[i]);
    }
  }
})

function fakeFetch() {
  return new Promise((resolve, reject) => {
     let count = Math.floor(Math.random() * 20) + 1;
     let result = [];
     for (let i = 0; i < count; i++) {
       result.push({ text: Math.random() });
     }
     resolve(result);
  })
}

.test {
  height:10px;
  background-color: red;
  margin: 10px;
}
.test2 {
  height: 35px;
 }

P.S。。要避免使用带有<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <h2>Items:</h2> <div class="test" :class="{ test2: isShown(index) }" @click="changeShow(index)" v-for="(item,index) in items" :key="index"> </div> </div>数组的例程，可以将每个元素定义为组件，并使用单个变量show切换其内部可见性。

Answer 3

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

如果您要控制所显示的数据，则可以按以下方式声明它

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

并更改可见属性，而不是全局show变量。

如果不是，那么您可能要考虑通过计算属性来构建它

您可以在此密码笔https://codepen.io/anon/pen/ejmdPX?editors=1111上查看此解决方案

Answer 4

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

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

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

Vue.js：单击循环后更改颜色

4 个答案: