鍍金池/ 問答/HTML5  HTML/ vue循環(huán)出來的數(shù)據(jù)，怎么點(diǎn)擊的時(shí)候，給當(dāng)前的變色呢？

vue循環(huán)出來的數(shù)據(jù)，怎么點(diǎn)擊的時(shí)候，給當(dāng)前的變色呢？

vue循環(huán)出來的數(shù)據(jù)，怎么點(diǎn)擊的時(shí)候，給當(dāng)前的變色呢？
我頁面是這樣寫的

       <ol v-if="tooglezhi" class="ol_one">
                        <li v-for="(item,key) in arr" 
                               @click="son(item,key)"><span></span>{{item}}</li>
                    </ol>

clipboard.png

在data中

clipboard.png

clipboard.png

我想要的效果是

clipboard.png

我點(diǎn)擊其中一個(gè)的時(shí)候 其中的變色，怎么用vue實(shí)現(xiàn)呢 我之前一直是用jquery寫的

回答
編輯回答
忘了我

加一個(gè)class:

<li v-for="(item,key) in arr"  @click="son(item,key)" :class='key==selected?"selected":""'><span></span>{{item}}</li>

data(){
    return{
        selected:-1
    }
},
methods:{
    son(item,key){
        this.selected=key;
    }
}

.selected{
    color:red;
}
2017年8月7日 21:41
編輯回答
紓惘

獲取到的data，你可以自定義個(gè)變量，isActive，默認(rèn)都是false,當(dāng)你點(diǎn)擊的時(shí)候，給當(dāng)前這個(gè)isActive賦值為true就可以了，li上在綁定一個(gè)class名
<li v-for="(item,key) in arr" click="son(item,key)" :class="{'active': item.isActive}"><span></span>{{item}}</li>

2018年2月16日 03:42
編輯回答
懶洋洋
<div :class="{active: 'currentKey === key'}"></div>
data() {
    currentKey: 0
},
methods: {
    son(key) {
        this.currentKey =  key
    }
}
2018年3月25日 18:15
編輯回答
萌小萌
data:index:0


<li v-for="(item,key) in arr" @click="key=index" :class="key==index?'active':''"><span></span>{{item}}</li>
2017年1月13日 08:14