相信大家都會遇到這種情況：v-for迴圈時，我只需要點選到的元素做出相應反應，其他的元素不變；但是往往所有v-for迴圈出的元素都會變化。如下面的程式碼：我需要點選到的元素新增一個類樣式，其他元素不變，但是這樣會導致所有的元素都會變化

html：

<div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'>
 <span>{{item.name}}</span>
</div>

css：

.addclass{
 color : red;
}

js：

data:{
 items :[
  {
  name ：'apple',price: '5$'
  },{
  name:'banana',price:"3$"
  },{
  name:'pear',price:'4$'
  }
 ],isactive : false
}

onclick(){
 this.isactive = true
}

解決方法：使用index索引，當點選一個元素時，將該元素的index索引賦給類樣式的啟用變數，如果該變數和index相等時，則啟用該類樣式

html：

<div v-for = "(item,index) in items" :class = "isactive == index ? 'addclass' : '' " @click='onclick(index)'>
 <span>{{item.name}}</span>
</div>

css：

.addclass{
 color : red;
}

js：

data:{
 items :[
  {
  name ：'apple',isactive : -1
}
onclick(index){

 //將點選的元素的索引賦值給bian變數
 this.isactive = index
}

補充知識：v-for 遍歷陣列點選動態繫結樣式

這可能是一個對於任何js開發者來說都非常簡單的問題，或者根本談不上被叫做“問題”，“基操”而已。但是，很遺憾，我為此開了個篇幅簡略記錄下它，因為這是我處於前端開發基礎階段數次阻滯過我的問題，以下暫提供一種解決方案，後續可能補充。

這類問題多見於單頁面應用（SPA）中的側邊欄、表格列等，當我曾拿到這個需求時，我以為我能用Vue中介紹的Class動態繫結來解決，事實上的確如此，但我用錯了，請看我錯誤的解決方法：

HTML

<template>
<!-- 點選某個繫結樣式 -->
 <ul>
  <li v-for="(data,index) in formData" :key="data.id" :class="{active: isActive}" @click="currentInfo(data,index)">name: {{data.name}}，age: {{data.age}}
  </li>
 </ul>

</template>

JavaScript

<script>
export default {
  name: 'classActive'
  data() {
    return {
      isActive: false,// 用來判斷active樣式類是否顯示
      formData: [{
        id: 1,name: 'zhangsan',age: 20
      },{
        id: 2,name: 'lisi',age: 21
      },{
        id: 3,name: 'wangwu',age: 22
      }
    }
  }
  methods: {
    currentInfo(data,index) {
      if(data.id-1 === index) { // 當前選擇的列表項與列表id號相等則繫結active
       this.isActive = true;
      }
    }
  }
}
</script>

Style

<style scoped>
  li {
    list-style: none;
    border: 1px solid #333;
  }
  .active {
    background: light-gray;
  }
</style>

好，於是我興沖沖地切回頁面看效果，結果：

當我點選其中的一行時，結果所有的li都綁上了active樣式，稍微想一下，相信大家都能找到問題所在，所有li的樣式都由一個isActive控制，當我點選一行，全域性變數isActive變為ture，當然所有的li都會綁上啦！然後我就停滯下來，思索一番，想過在data陣列各項裡插入一個標識用來單獨控制，但被我否決了，一來物件中插入屬性麻煩，二來汙染資料來源。於是，便有了下面我要說的解決方法：

HTML

<template>
<!-- 點選某個繫結樣式 -->
 <ul>
  <li v-for="(data,index) in formData" :key="data.id" :class="currentClass(index)" @click="currentInfo(index)">name: {{data.name}}，age: {{data.age}}
  </li>
 </ul>

</template>

JavaScript

<script>
export default {
  name: 'classActive'
  data() {
    return {
      currentNumber: 0,age: 22
      }
    }
  }
  methods: {
    currentInfo(index) {
      this.currentNumber = index;
    },currentClass(index) {
      return [this.currentNumber == index ? 'active' : ''];
    }
  }
}
</script>

Style

<style scoped>
  li {
    list-style: none;
    border: 1px solid #333;
  }
  .active {
    background: light-gray;
  }
</style>

這裡，我新建一個變數空間儲存當前點選的列表序號index，這樣不管怎樣點選，這個currentNumber永遠是唯一的，那麼和它相等的陣列項也是唯一的，相等即可繫結active樣式了，看效果：

好，以上就解決了遍歷陣列點選動態繫結樣式，以後我找到更好的，我會補充，也非常歡迎大家在評論裡給出更好的建議。

以上這篇vue中v-for迴圈選中點選的元素並對該元素新增樣式操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。