鍍金池/ 問答/HTML5  HTML/ Vue如何class切換

Vue如何class切換

<ul class="fs-8" id="select-product-app">
    <li class="chose-btns-contianer">25</li>
    <li class="chose-btns-contianer">26</li>
    <li class="chose-btns-contianer">27</li>
    <li class="chose-btns-contianer">28</li>
    <li class="chose-btns-contianer">29</li>
    <li class="chose-btns-contianer">30</li>
</ul>

如代碼所示，如何實(shí)現(xiàn)li被點(diǎn)擊后vue為他添加btn-active類，點(diǎn)擊其他的來回切換？

回答
編輯回答
墨小白

1.在data里面定義你要添加的class名字

2.圖片描述

綁定點(diǎn)擊事件（要傳index）

3.圖片描述

2017年11月12日 15:20
編輯回答
吢丕

vue用:class=''方法實(shí)現(xiàn)，vue需要每個(gè)li都綁定唯一的判斷條件；
比如:classShow為ture或者false

<li v-for='(item,index) in lists' class="chose-btns-contianer"  :class='{"btn-active":item.classShow}' @click='run(index)'>25</li>

run(index){
     this.lists.forEach(v=>{
         v.classShow=false;//所有了li都去除btn-active
     })
    this.lists[index].classShow=true;
}

做這樣的class切換，vue比jq要麻煩；

2018年7月2日 04:56
編輯回答
愿如初

用一個(gè)flag標(biāo)記當(dāng)前點(diǎn)擊的是哪一個(gè)元素，當(dāng)flag和當(dāng)前元素一致時(shí)，增加btn-active

<ul class="fs-8" id="select-product-app">
    <li class="chose-btns-contianer" @click="flag=25"
    :class="{'btn-active': flag===25}">25</li>
    <li class="chose-btns-contianer" @click="flag=26"
    :class="{'btn-active': flag===26}">26</li>
    <li class="chose-btns-contianer" @click="flag=27"
    :class="{'btn-active': flag===25}">27</li>
    <li class="chose-btns-contianer" @click="flag=28"
    :class="{'btn-active': flag===28}">28</li>
</ul>
2017年9月2日 21:12