<view :class="[active==index ? 'checkno' : 'checks']" v-for="(item,index) in lists" :key="index" @click="check(index,item.area_name)">{{item.area_name}}</view>
data() {
return {
active: 0,
lists:[
{
area_name:'一'
},
{
area_name:'二'
}
]
}
},
methods: {
check(index,name){
this.active = index
}
}
<style>
.checks, .checkno{//默认样式
height: 60rpx;
width: 20%;
// background: yellow;
font-size: 30rpx;
float: left;
display: flex;
justify-content: center;
align-items: center;
padding: 30rpx;
}
.checkno{//切换后样式
color: #f02e4b;
}
</style>
uniapp小程序点击切换字体样式
最新推荐文章于 2024-06-21 09:46:03 发布