| 本文实例为大家分享了vue uniapp实现分段器效果的具体代码，供大家参考，具体内容如下 此举只是记录下用vue动态改变样式效果 先展示下效果 
template部分 <view class="countTime"> <text class="title">折扣和就餐时间</text> <view class="wrap"> <view class="box" v-for="(item,index) in discountList" :key="index" @click="toggleItem(index)"> <view class="selBox" :style="[itemStyle(index)]"> <view class="countBox"> <text class="count">{{item.count}}</text> <text>折</text> </view> <text class="time">{{item.time}}</text> </view> <text class="countPrice" :style="[priceStyle(index)]">折后人均￥100</text> </view> </view></view>script部分
这部分关键的是computed下的代码 export default { data() { return { themColor:this.Enum.Them.base, discountList:[{ "count":6.9, "time":"12:00~13:00" },{ "count":6.7, "time":"14:00~16:00" },{ "count":6.5, "time":"20:00~22:00" }], currentIndex:0 } }, computed:{ itemStyle(){ return index => { let style = {} if(index === this.currentIndex){ style.backgroundColor = this.themColor; style.border = `1px solid ${this.themColor}`; style.color = '#fff'; } //当选中第二个时 第一个右边框和第三个左边框置为none if(this.currentIndex === 1){ if(index === this.currentIndex - 1){ style.borderRight = 'none !important' } if(index === this.currentIndex + 1){ style.borderLeft = 'none !important' } } return style } }, priceStyle(){ return index => { let style = {} if(index === this.currentIndex){ style.color = this.themColor } return style } } }, methods: { toggleItem(idx){ this.currentIndex = idx } } }css样式
这里使用的scss，具体的用法这里不再赘述啦 .countTime{ display: flex; flex-direction: column; .title{ font-size: $uni-font-size-bl; margin: 20rpx 0; } .wrap{ display: flex; .box{ @include flex(column,center,center); width: 33%; &:nth-child(2){ & > .selBox{ border-left: none; border-right: none; } } .selBox{ @include flex(column,center,center); width: 100%; height: 150rpx; border: 1px solid $uni-border-color; .countBox{ font-size: $uni-font-size-lg; font-weight: bolder; margin-bottom: 10rpx; .count{ font-size: $uni-font-size-bl; } } .time{ font-size: $uni-font-size-l; } } .countPrice{ margin-top: 10rpx; font-size: $uni-font-size-l; } } } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
小程序中如何绘制思维导图详解
一篇文章教你实现VUE多个DIV,button绑定回车事件 |
