Vue.js——实现下拉列表多选
需要先对表单的select标签的size属性进行设置，以及要声明multiple属性代码：<!doctype html><html lang="en"><head><meta charset="
·
需要先对表单的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>
运行效果：
注：要实现多选，需要加上ctrl+鼠标点击才能实现多选
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献10条内容
所有评论(0)