Vue如何class切换

Question

<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>

如代码所示，如何实现li被点击后vue为他添加btn-active类，点击其他的来回切换？

Answer 1

vue用:class=''方法实现，vue需要每个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要麻烦；

Answer 2

用一个flag标记当前点击的是哪一个元素，当flag和当前元素一致时，增加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>

Answer 3

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

2.

绑定点击事件（要传index）

3.