dynamic-border.uvue

<template>
	<view style="margin: 15px;border-radius: 10px;background-color: white;">
		<view
			v-for="index in 10" :key="index"
			:class="(index < 9 ? 'bb1' : '') + ' ' + (currentIndex == 0 ? 'btlr10 btrr10' : currentIndex == 9 ? 'bblr10 bbrr10' : '')"
			style="flex-direction: row;align-items: center;padding: 15px"
			:style="index == currentIndex ? 'background-color :#57BE6A;' : ''"
			@tap="currentIndex = index">
			<view>
				<text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{ index }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 1,
			}
		},
    methods: {
      changeIndex(index: number) {
        this.currentIndex = index
      }
    }
	}
</script>

<style>
	.bb1{
		border-bottom: 1rpx solid #EEEEEE;
	}
	.btlr10{
		border-top-left-radius: 10rpx;
	}
	.btrr10{
		border-top-right-radius: 10rpx;
	}
	.bblr10{
		border-bottom-left-radius: 10rpx;
	}
	.bbrr10{
		border-bottom-right-radius: 10rpx;
	}
</style>