Vue实现动态的选中状态切换效果

 HTML中的内容为以下。

<ul class="list"><li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ ischeck:index==current}">{
   {item.title}}</li>
</ul>

JS中的内容为以下。

data () {return {current:0,liList:[{title:'中国'},{title:'美国'},{title:'英国'},{title:'法国'}]}
},
methods:{	addClass:function(index){this.current=index}
}  

CSS中的内容如下。

.ischeck  {background: #e6e6e6;height: 30px;width: 50px;line-height: 0px;padding: 15px 10px;
}