vue多个列表点击一次选中，双击取消

 

遍历出data里面的数据 v-for

给li加点击事件

绑定class样式  怎么控制样式的显示  

通过 class的控制  v:bind:class={class:index==变量}  下标和class变量是否相等控制true  false

代码：

<div id="app">        
            <ul>
                <li v-for='(item,index) in arr' v-bind:class='{bg:index==isactive}'
                     @click='fn(index)'>{{item}}</li>
            </ul>         
        </div>
        
        <script>
            var vm=new Vue({
                el:'#app',//el  element 获取容器 vue作用的范围
                data:{
                    isactive:0,
                    arr:['健康医疗','生活服务','信息安全','文化娱乐'],                    
                },
                methods:{
                    fn:function(index){
                        //点击切换 变量的值 赋值为 index
                        console.log(index);
                        this.isactive=index;
                    }
                }
                
            
            
            })
            
            

        </script>