UNIAPP----选中元素边框变色

核心思想：

边框默认样式1，和点击之后的样式2

遍历出来数据，要知道选中的下标

声明一个变量，一旦下标和变量相等，则执行样式2

HTML：

<template>
	<view>
		<view class="wai">
			<view class="beixuan" v-for="(item, index) in list" :key="index" @click="dianji(index)" :class="index == active ? 'active' : ''">
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

JS：

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '第一个'
				},
				{
					name: '第二个'
				},
				{
					name: '第三个'
				},
				{
					name: '第四个'
				},
				{
					name: '第五个'
				},
				{
					name: '第六个'
				},
				{
					name: '第七个'
				}
			],
			active: 0
		};
	},
	methods: {
		dianji(index) {
			this.active = index;
			console.log(this.active);
		}
	}
};
</script>

CSS：

<style scoped>
.wai {
	width: 100%;
	height: 200rpx;
	margin-top: 200rpx;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	line-height: 70rpx;
}
.beixuan {
	height: 80rpx;
	font-size: 36rpx;
	padding: 0 30rpx;
	border: 4rpx solid #dddddd;
	border-radius: 20rpx;
	margin: 0 20rpx 20rpx 0;
	color: #aaa;
}
.active {
	border: 4rpx solid #00ce88;
	color: #00ce88;
}
</style>