vue列表点击切换颜色

最新推荐文章于 2024-07-18 10:08:04 发布

weixin_43834364

最新推荐文章于 2024-07-18 10:08:04 发布

阅读量4.3k

点赞数 2

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.csdn.net/weixin_43834364/article/details/96493764

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

*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;
			}
		}

效果类似如图
在这里插入图片描述