[移动开发]小程序的按钮组功能

按钮组代码：

<view style="z-index: 10;border: 1rpx solid #157DFE;border-radius: 55rpx;" class=" uni-flex-between-center">
						<view class="supervise-container" v-for="(list,index) in superviseconfigEntities" :style="(index==0?'border-top-left-radius:'+ '55rpx;'+'border-bottom-left-radius:'+'55rpx;'+'border-right:'+' 1rpx solid #157DFE;':(index==2)?'border-top-right-radius:'+ '55rpx;'+'border-bottom-right-radius:'+'55rpx;'+'border-left:'+' 1rpx solid #157DFE;':'')"
						 :class="{colorChange:index==dynamic}" @click="getButton(index)">
							<view class="supervise-button" :class="{colorChange1:index==dynamic}">{{list.effect}}</view>
						</view>
					</view>

superviseconfigEntities: [{
					"effect": "全部",
				}, {
					"effect": "日常检查",
				}, {
					"effect": "专项检查",
				}],
				dynamic: 0,

getButton(index) {
				console.log(index);
				//点击添加字体颜色，其他的删除class名称
				this.dynamic = index;
			},

	.supervise-container:hover {
		cursor: pointer;
	}

	.supervise-button {
		color: #157DFE;
		height: 40rpx;
		width: 100rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 20rpx;
		color: #157DFE;
	}

	.colorChange {
		background: #157DFE;
	}

	.colorChange1 {
		color: #fff;
	}

手动分割线
部分动态样式代码：

:style="(index==0?'border-top-left-radius:'+ '55rpx;'+'border-bottom-left-radius:'+'55rpx;'+'border-right:'+' 1rpx solid #157DFE;':(index==2)?'border-top-right-radius:'+ '55rpx;'+'border-bottom-right-radius:'+'55rpx;'+'border-left:'+' 1rpx solid #157DFE;':'')"

 :class="{colorChange:index==dynamic}"

:style="'width:'+itemWidth+'rpx;'+ 'border-bottom:' + (currentIndex == index ? '5rpx solid ' + borderBottom : '5rpx solid #fff' )"  :class="item.CheckItemResult==2? 'qidIndexGray' : (item.CheckItemResult==null) ? 'qidIndexUnChecked':(item.CheckItemResult!=null)?'qidIndexChecked':''"