在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

       <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

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

回答
編輯回答
忘了我

加一個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，你可以自定義個變量，isActive，默認都是false,當你點擊的時候，給當前這個isActive賦值為true就可以了，li上在綁定一個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