uniapp实现按钮选中样式效果

实现选中按钮后的样式效果：

 代码如下：

<template>
	<view class="container">
		<view class="button-group">
			<view @click="openNoBot(1)" class="notSelect" :class="{'checked':checked===1}">按1</view>
			<view @click="openNoBot(2)" class="notSelect" :class="{'checked':checked===2}">按2</view>
			<view @click="openNoBot(3)" class="notSelect" :class="{'checked':checked===3}">按3</view>
			<view @click="openNoBot(4)" class="notSelect" :class="{'checked':checked===4}">按4</view>
			<view @click="openNoBot(5)" class="notSelect" :class="{'checked':checked===5}">按5</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: null,
			}
		},
		methods: {
			openNoBot(num) {
				this.checked = num
			},
		}
	}
</script>

<style>
	.notSelect {
		width: 80rpx;
		height: 36rpx;
		text-align: center;
		padding: 20rpx 16rpx;
		margin: 4rpx 5rpx 6rpx 0rpx;
		font-size: 26rpx;
		color: #aaa;
		border-radius: 16rpx;
		border: 2rpx dashed #aaa;
	}

	.checked {
		border: 2rpx dashed red;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.button-group {
		display: flex;
		flex-direction: row;
	}

	.button {
		padding: 10px 20px;
		margin: 0 10px;
		border-radius: 5px;
		background-color: #eee;
		cursor: pointer;
	}

	.active {
		background-color: #007aff;
		color: #fff;
	}
</style>