使用vue实现点击选中，再点击取消选中，并将选中的数据展示出来的案例

最新推荐文章于 2023-06-27 14:03:18 发布

weixin_46716934

最新推荐文章于 2023-06-27 14:03:18 发布

阅读量1.9k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46716934/article/details/109239196

版权

使用vue实现点击选中，再点击取消选中，并将选中的数据展示出来的案例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			.clickColor {
				border: 2px solid rgba(7, 167, 227, 1);
				color: #07A7E3;
			}
			.inputClass{
				width: 400px;
				height: 30px;
				border-radius: 30px;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="btnBox">
			<div :class="{clickColor:spanIndex.indexOf(i)>-1}" v-for="(v,i) in banksData" v-text="v.name" @click="banksClick(v,i)"></div>
			<input v-model="sss" class="inputClass"/>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
	<script>
		var app = new Vue({
			el: '.btnBox',
			data() {
				return {
					sss: "",
					aaa:"",
					strs:[],
					banksData: [{
							name: '项目1',
							id: 1
						},
						{
							name: '项目2',
							id: 2
						},
						{
							name: '项目3',
							id: 3
						},
					],
					spanIndex: []
				}

			},
			methods: {
				banksClick(v,i) {
					let arrIndex = this.spanIndex.indexOf(i);
					if (arrIndex > -1) {
						//取消选中
						this.spanIndex.splice(arrIndex, 1);
						this.strs.splice(arrIndex,1);
						this.sss = this.strs.join(" ");
					} else {
						//点击选中
						this.spanIndex.push(i);
						this.strs.push(v.name);
						this.sss = this.strs.join(" ");
					}
				}
			}
		})
	</script>

</html>

weixin_46716934

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫