uniapp 多选的效果

uniapp 给我们提供了tabs组件进行单项的切换，但是多选的效果需要我们自己去手写。例如我们去选择自己感兴趣的职业，选中增加选中的背景色，点击选中的课程可以取消已经选中的课程：

<template>
	<view class="wrap">
		<block v-for="(item,index) in jobs" :key="index">
			<view class="item" :class="{active:ids.includes(item.id)}" @click="change(item.id)">{{item.name}}</view>
		</block>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				jobs: [{
						id: 1,
						name: '程序员'
					},
					{
						id: 2,
						name: '设计'
					},
					{
						id: 3,
						name: '文案'
					},
					{
						id: 4,
						name: '策划'
					}
				],
				ids: [] //存放数组的下角标
			}
		},
		methods: {
			change(id) {

				if (this.ids.includes(id)) {
					this.ids = this.ids.filter(item => {
						return item != id
					})
				} else {
					this.ids.push(id);
				}
				console.log(this.ids);
			}
		},
		onLoad() {

		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		display: flex;

		.item {
			width: 25%;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
		}

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

这样我们就能拿到选中的课程id 进行后台数据交互了。