vue列表点击切换颜色

时间:2022-07-26
本文章向大家介绍vue列表点击切换颜色,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
*HTML代码块*
<div class='box'  v-for="( item,index)  in list"  :class='{activeindex==index ?  'box2'  :'' }  @click='changeIndex(index)' >
		{{item.title}}
</div>
css代码
.box{
	width:160px;
	padding:20px;
	color:black;
	text-align:center;
}
.box{
	width:160px;
	padding:20px;
	color:red;
	text-align:center;
}
   JS代码
   data(){
    return{
         activeindex:0,
    		list:[
				{ title:'我是一‘},
				{ title:'我是二‘,
				{ title:'我是三‘,
				{ title:'我是四‘}
                 ]
	       }
	},
	method:{
			changeIndex(index){
				this.activeindex=index;
			}
		}

效果类似如图