Vue.js——实现下拉列表多选_vue.js不用ui组件库实现下拉多选反显组件

作者：IT小白 | 2024-02-18 22:03:48

踩

vue.js不用ui组件库实现下拉多选反显组件

需要先对表单的select标签的size属性进行设置，以及要声明multiple属性
代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<script src="vue-resource-1.3.4.js"></script>
	<script src="vue-2.4.0.js"></script>
	<style>

	</style>
</head>
<body>
	<div id="app">
		<form action="">
			<p>请选择你喜欢的运动:</p>
			<select name="sport" v-model="selected" size="2" multiple>
				<option value="游泳">游泳</option>
				<option value="跑步">跑步</option>
				<option value="篮球">篮球</option>
			</select>
		</form>
		<p>你喜欢的运动是：{{selected}}</p>
	</div>	
</body>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			selected:[]
		},
		methods:{
		},
	});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

运行效果：
在这里插入图片描述
注：要实现多选，需要加上ctrl+鼠标点击才能实现多选

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/110854