Vue中点击active并第一个默认选中功能的实现

最新推荐文章于 2023-07-24 10:27:52 发布

mjllove

最新推荐文章于 2023-07-24 10:27:52 发布

阅读量2k

点赞数

文章标签： javascript css vue.js html

本文链接：https://blog.csdn.net/mjllove/article/details/114981538

版权

Vue中点击active并第一个默认选中功能的实现

循环出来的标签

<text class="hao"
	   :class="[{active: activeName == item}]"
       @click="Change(item)"
	   v-for="(item,index) in danList" :key="index"
>{{item}}</text>

data里的数据

danList:[
	'B1','B2'
],
activeName: 'B1',

js这样写

Change(item){
	this.activeName = item
},

css样式

.hao{
		width: 100upx;
		height: 120upx;
		background-color: #CFE6FF;
		color: #66677A;
		font-size: 20px;
		text-align: center;
		line-height: 120upx;
	}
	.hao.active{
		width: 100upx;
		height: 120upx;
		background-color: #007BFE;
		color: #FFFFFF;
		font-size: 20px;
		text-align: center;
		line-height: 120upx;
	}