首先设置参数初始值
mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
normalStyle:'',
choseValue:'',
首先根据条件判断 style="choseValue == 'choseone'?mapStyle:normalStyle" 一个样式,然后 data-index="choseone" 一个值,
<view class="custom-kind" @tap="choose">
<view class="custom-one" :style="choseValue == 'choseone'?mapStyle:normalStyle" data-index="choseone" >优质 35</view>
<view class="custom-one" :style="choseValue == 'chosetwo'?mapStyle:normalStyle" data-index="chosetwo" >待维护 25848</view>
<view class="custom-one" :style="choseValue == 'chosethree'?mapStyle:normalStyle" data-index="chosethree" >无感知 48</view>
</view>
点击时根据e.target.dataset.index获取 data-index的值,然后将值存入this.choseValue ,style就会动态判断显示哪一个样式
export default {
data() {
return {
mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
normalStyle:'',
choseValue:'',
}
},
methods: {
choose(e){
let value = e.target.dataset.index
this.choseValue = value;
this.$emit("choose",value);
}
}
}
完整事例:
<template>
<view class="custom-kind" @tap="choose">
<view class="custom-one" :style="choseValue == 'choseone'?mapStyle:normalStyle" data-index="choseone" ref="choseone" value="choseone">优质 35</view>
<view class="custom-one" :style="choseValue == 'chosetwo'?mapStyle:normalStyle" data-index="chosetwo" ref="chosetwo" value="chosetwo">待维护 25848</view>
<view class="custom-one" :style="choseValue == 'chosethree'?mapStyle:normalStyle" data-index="chosethree" ref="chosethree" value="chosethree">无感知 48</view>
</view>
</template>
<script>
export default {
data() {
return {
mapStyle:'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
normalStyle:'',
choseValue:'',
}
},
methods: {
choose(e){
let value = e.target.dataset.index
this.choseValue = value;
this.$emit("choose",value);
}
}
}
</script>
<style>
.custom-kind{
display: flex;
justify-content: space-between;
align-items: center;
margin: 54rpx 44rpx 0 44rpx;
padding-bottom: 42rpx;
}
.custom-one{
background:rgba(255,241,240,1);
border-radius:8rpx;
font-size:28rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,97,44,1);
padding: 10rpx 28rpx 10rpx 28rpx;
}
.active{
background:rgba(255,97,44,1);
color:rgba(255,255,255,1);
}
</style>