uniapp，点击选中并改变颜色，第二次点击取消选中状态-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp，点击选中并改变颜色，第二次点击取消选中状态。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、效果图

uniapp，点击选中并改变颜色，第二次点击取消选中状态,uniapp,uni-app,javascript,前端

二、代码实现

字符串的indexOf和数组的indexOf用法一致！

arr.indexOf(item) 该方法返回某个元素在数组中的位置。若没检索到，则返回 -1。文章来源地址https://www.toymoban.com/news/detail-751986.html

关键代码：(通过:class绑定)
:class="selectList.indexOf(sub.type) !== -1 ? 'right_item right_item_active':'right_item'"

2.1html

		<view class="right">
			<!-- 通过（selectList.indexOf(sub.type) !== -1）来判断选中的数组里，是否有该元素。
				点击时，如果有，会移除；如果没有，会添加上 
			-->
			<view :class="selectList.indexOf(sub.type) !== -1 ? 'right_item right_item_active':'right_item'"
				v-for="(sub,index) in leftList[tabindex].children" :key="index" @click="rightBtn(sub,index)">
				{{ sub.type }}
			</view>
		</view>

2.2js

			//点击右侧
			rightBtn(sub, index) {
				console.log(sub, index)
				this.rightindex = index;

				//uniapp 数组添加不重复元素
				if (this.selectList.includes(sub.type)) {
					this.selectList = this.selectList.filter((item) => {
						return item != sub.type;
					});
				} else {
					this.selectList.push(sub.type);
					this.selectList = [...new Set(this.selectList)]; // 数组去重
					if (this.selectList.length > 3) {
						uni.showToast({
							title: "最多选3个",
							icon: "none"
						});
						this.selectList.splice(3, this.selectList.length - 3);
					}
				}
			},