鍍金池/ 問答/HTML/ vue v-for循環(huán)出來的li元素，如何操作其中一個(gè)的樣式？

vue v-for循環(huán)出來的li元素，如何操作其中一個(gè)的樣式？

點(diǎn)擊某個(gè)li元素后出現(xiàn)或者消失該元素上一個(gè)蒙層，但是不知道怎么動(dòng)態(tài)綁定類名，只綁定到該元素?，F(xiàn)在是一點(diǎn)擊所有元素都出現(xiàn)蒙層了。
目前是這樣想的：
:class="{show:isShow + index}(這個(gè)語法是錯(cuò)的,大概意思是想這樣) 想把index綁定到變量上，然后再給他添加上class來顯示，但是就像上面寫的那樣，這個(gè)語法實(shí)現(xiàn)不了
第二是給每個(gè)元素添加上 show1/show2/show3 的類名，但是這樣就表示要寫很多css: show1,show2,show3 {display：block}，如果元素很多總不能一直加下去

回答
編輯回答
陪我終

在獲取數(shù)據(jù)后，循環(huán)為數(shù)組json的每一項(xiàng)添加屬性，
例如 "seen":"false"，
然后綁定到class里 三木運(yùn)算
例如 <li :class="list.seen?'masking':''" @click="showMasking(index)"></li>
然后利用參數(shù)index 來修改你所綁定的具體數(shù)據(jù)，改成true，就會(huì)添加類名，改回false就會(huì)移除類名

2018年9月12日 06:11
編輯回答
尐懶貓

希望能幫到您

<li  v-for="node in nodes" :class={'active': node.actived} @click="clickNode(node)" :key="node.id">{{node.name}}</li>

data(){
    return {
        activedNode:null
    }
},
methods:{
    clickNode(node){
        this.activedNode && (this.activedNode.actived = undefined);
        node.actived = !node.actived;
        this.activedNode = node;
    }
}
2017年2月3日 05:58
編輯回答
雅痞

循環(huán)的時(shí)候加一個(gè)判斷，在你需要加類名的時(shí)候加上就行了。

例如：

<li v-for="(item,idx) in arr" :key="item.key" :class="idx === 1?'hello':'world'">
</li>
2017年1月19日 10:36