Vue的单选/多选效果

最新推荐文章于 2025-06-08 09:12:47 发布

原创最新推荐文章于 2025-06-08 09:12:47 发布 · 2.8w 阅读

36 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍如何使用Vue.js实现单选和多选效果，包括DOM结构、CSS样式及JavaScript逻辑。通过两种方法实现多选功能：一种利用数组includes()和filter()方法，另一种通过数组元素布尔属性切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的单选/多选效果

includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效

filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组

一、单选

DOM文档中结构如下：

<ul class="box">
	<li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>
</ul>

CSS样式如下：

<style type="text/css">
body{margin:0;}
ul{
	padding:0; list-style:none; 
	margin:150px 150px;
}
li{
	width:80px; height:50px; 
	display:inline-block;
	border-radius:8px; border:1px #000 solid;
	text-align:center; line-height:50px;
	cursor:pointer; 
	transition:all 0.3s linear;
	margin-left:5px;
}
li:hover{
	background-color:#0CF; color:#fff; 
	border:1px #fff solid;
}	
li.checked{
	background-color:#0CF; color:#fff; 
	border:1px #fff solid;
}
</style>

JavaScript样式如下：

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : ["上海","北京","广州","重庆","西安"],
		n : 0
	},
	methods :{
		changeList(index){
			this.n = index;//this指向app
		}
	}
})
</script>

效果如图所示：

选中“北京”时：

二、多选

CSS样式如下：

<style type="text/css">
body{margin:0;}
.box{ margin:150px 150px;}
ul{
	padding:0; 
	list-style:none;
}
li{
	width:50px; height:30px; display:inline-block;
	text-align:center; line-height:30px;
	cursor:pointer;margin-left:5px;
}
li:before{ 
	display:inline-block; width:10px; height:10px; 
	line-height:10px; content:""; border:1px #000 solid; 
	margin-right:2px; transition:all 0.3s linear;
}	
li.checked:before{ 
	background-color:#0CF; 
	border:1px #fff solid;
}
li.checked{color:#0CF;}
</style>

方法一：

DOM文档中结构如下：

<ul class="box">
    <li v-for="c,index of cities" :class="{checked:arr.includes(index)}" @click="checkedBox(index)">{{c}}</li>
</ul>

JavaScript样式如下：

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : ["上海","北京","广州","重庆","西安"],
		arr : []
	},
	methods :{
		checkedBox(i){
			if(this.arr.includes(i)){
				//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
				//filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
				this.arr=this.arr.filter(function (ele){return ele != i;});
				//this.arr=this.arr.filter((ele)=>ele!=i);
				//filter()为假时删除
			}else{
				this.arr.push(i);
			}
		}
	}
})

方法二：

DOM文档中结构如下：

<ul class="box">
    <li v-for="c,index of cities"
    :class="{checked:c.bOn}"
    @click="checkbox(index)">{{c.city}}</li>
</ul>

JavaScript样式如下：

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : [{city:"北京",bOn:false},
		{city:"上海",bOn:false},
		{city:"重庆",bOn:false},
		{city:"广州",bOn:false},
		{city:"西安",bOn:false}]
	},
	methods : {
		checkbox(i){
			this.cities[i].bOn = !this.cities[i].bOn;
		}
	}
})

效果如图所示：

多选效果：