vue实现点击追加选中样式效果

今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起 跟随小编过来看看吧

DOM**部分 

<ul>

	<li class="liMenu" 
        :class="idx==index?'hover':''" 
        @click="son(item,idx)" 
        v-for="(item,idx) in menu" 
        :key="idx">{{item}} 

	</li> 

</ul> 

**JS**

data(){ 

	return{ 

		menu:['首页','列表页','详情页'], 

		index:0 

	} 

},

methods:{ 

	son(item,idx){ 

	this.index=idx; 

	}

} 

**CSS** 

.liMenu{ 

	margin-right: 20px; 

	cursor:pointer; 

}

.liMenu.hover{ 

	color:red; 

}