相信大家都會遇到這種情況：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',
        price: '5$'
        },
        {
        name:'banana',
        price:"3$"
        },
        {
        name:'pear',
        price:'4$'
        }
    ],
    isactive : -1
}

onclick(index){

    //將點選的元素的索引賦值給bian變數

    this.isactive = index
}