uniProject/pages/newEnglish/components/selectTypes.vue

<template>
	<view class="select-types">
		<view :class="{active: activeSelect == 1}">学</view>
		<view :class="{active: activeSelect == 2}">></view>
		<view :class="{active: activeSelect == 2}">拼</view>
		<view :class="{active: activeSelect == 3}">></view>
		<view :class="{active: activeSelect == 3}">读</view>
		<view :class="{active: activeSelect == 4}">></view>
		<view :class="{active: activeSelect == 4}">选</view>
		<view :class="{active: activeSelect == 5}">></view>
		<view :class="{active: activeSelect == 5}">背</view>
	</view>
</template>

<script setup>
	defineProps({
		activeSelect: {
			type: String,
			required: true
		}
	})
</script>

<style lang="scss" scoped>
	.select-types {
		display: flex;
		justify-content: space-between;
	}
	.active {
		color: red;
	}
</style>