两数组内容相斥，改变其中一个数组影响另一个数组

需求：常用于将一整个范围内的数据区分为两个互斥数组，下文的例子可以作为一个小游戏，在所有给出的名词中区分出人名和水果名。改变其中一个数组内容会直接影响另一个数组。

 

实现思路：（用uniapp框架示范，vue框架也适用）定义两个数组存分别存放所有数据，和初始被选中数据。

 将实际存储水果名和人名的数组在computed里面定义和处理，通过关联两个数组实现一个数组改变另一个数组直接改变

 全部代码

<template>
	<view>
		区分数组 水果区
		<view class="kind1">
			<view v-for="(item, index) in fruitArr" :key="index">
				{{ item }}
				<uni-icons @click="deleteLabelItem(item)" class="icon-close" type="clear" size="20" color="red"></uni-icons>
			</view>
		</view>
		人名区
		<view class="kind2">
			<view v-for="(item, index) in peopleArr" :key="index">
				{{ item }}
				<uni-icons @click="changeSelfLabelList(item)" type="checkbox-filled" size="20" color="red"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			wholeArr: ['Lisa', 'Anna', 'Mike', '苹果', '香蕉', '樱桃', 'Jisoo', 'Bin', '草莓'],
			selectedArr: ['Mike', '苹果', '香蕉', '樱桃']
		};
	},
	computed: {
		fruitArr() {
			return this.wholeArr.filter(item => this.selectedArr.includes(item));
		},
		peopleArr() {
			//如果有更深的筛选添加可以用&&连接
			return this.wholeArr.filter(item => !this.selectedArr.includes(item) && item !== 'Lisa');
		}
	},
	methods: {
		changeSelfLabelList(item) {
			this.selectedArr.push(item);
		},

		deleteLabelItem(item) {
			this.selectedArr = this.selectedArr.filter(val => val !== item);
		}
	}
};
</script>

<style lang="scss">
.kind1 {
	border: 1px solid red;
	margin-bottom: 20rpx;
}
.kind2 {
	border: 1px solid blue;
}
</style>