vue实现多选点击、点击谁谁变色，一键重置颜色如何实现？

qq_43069664

已于 2022-09-28 16:42:31 修改

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-09-28 16:37:35 首次发布

本文链接：https://blog.csdn.net/qq_43069664/article/details/127092250

版权

vue 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		.active {
			color: red;
		}
		.box{
			display: flex;
		}
		.box >div{
			padding: 10px;
		}
	</style>
</head>

<body>
	<div id="app">
		<button @click="eliminate">
			重置
		</button>
		<div class="box">
			<div v-for="(item,index) in arr" :key="index" @click="tap(item.id)" :class="item.checked ? 'active' : ''">
				{{item.name}}</div>

		</div>
	</div>
</body>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			arr: [
				{
					id: 1,
					name: "按钮A",
					checked: false
				},
				{
					id: 2,
					name: "按钮B",
					checked: false
				},
				{
					id: 3,
					name: "按钮C",
					checked: false
				}
			]
		},
		methods: {
			tap(id) {
				this.arr.filter((item) => {
					if (item.id === id) {
						item.checked = !item.checked
						// 通过checked的值改变按钮颜色
					}
				})
			},
			eliminate() {
				this.arr.filter((item) => item.checked = false)
			}
		}
	})
</script>
<html>