前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue列表点击切换颜色

vue列表点击切换颜色

作者头像
kirin
发布2020-09-29 09:48:37
2.4K0
发布2020-09-29 09:48:37
举报
文章被收录于专栏:Kirin博客Kirin博客
代码语言:javascript
复制
*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;
			}
		}

效果类似如图

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档