vue点击多选(可取消)

关键因素XFactor

已于 2023-08-16 10:56:09 修改

阅读量400

点赞数

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

于 2022-12-30 10:01:50 首次发布

本文链接：https://blog.csdn.net/weixin_52923266/article/details/128491124

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这篇博客通过一个简单的HTML和Vue.js代码示例展示了如何创建一个列表，其中列表项可以被选择。当用户点击列表项时，其背景色会改变，表示已被选中。实现这一功能的关键在于Vue的数据绑定和事件处理，以及CSS样式来美化元素。

摘要由CSDN通过智能技术生成

先看效果图

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.listBox{
				display: flex;
				margin: 50px;
			}
			.list {
				border: 1px solid #BEC3CB;
				padding: 11px 27px;
				border-radius: 100px;
				margin-right: 20px;
				cursor: pointer;
			}
			.checked {
				color: #FFFFFF;
				background: #3377FF;
				border: 1px solid #3377FF;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="listBox">
				<div class="list" v-for="(item,index) in labelList" :key="index" :class="{checked:arr.includes(index)}"
					@click="checkedBox(index)">{{item}}</div>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#box',
				data(){
					return{
							labelList: ["张力", "陈鑫", "胥庆洲", "颜志刚"],
							arr: [],
					}
				},
				methods: {
				   checkedBox(i) {
				   		if (this.arr.includes(i)) {
				   			this.arr = this.arr.filter(function(ele) {
				   				return ele != i;
				   			});
				   		} else {
				   			this.arr.push(i);
				   		}
				   	},
				}
			})
		</script>
	</body>
</html>