vue怎么实现点击li，li增加一个class，其他的li去掉这个class

Question

jq  可以使用  $(this).addClass('current').siblings().removeClass('current');vue应该怎么实现这个效果呢？

Answer 1

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

new Vue({
			el:'.list',
			data:{
				current:0,
				items:[
					{title:'item1'},
					{title:'item2'},
					{title:'item3'},
					{title:'item4'}
				]
			},
			methods:{
				addClass:function(index){

					this.current=index;
				}
			}
		})

大概就是这样