vue如何去动态获取下拉框的值

vue中可以使用对象数组和v-for去循环创造出一个下拉框代码如下<!DOCTYPE html><html><head><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script><meta charset="utf-8" /><t

为了心中所想

3626人浏览 · 2020-09-17 09:41:06

为了心中所想 · 2020-09-17 09:41:06 发布

vue中可以使用对象数组和v-for去循环创造出一个下拉框
代码如下

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="sa" >
			<div>
				<select >
					<option v-for="(a,b) in student" v-bind:value="a.sid">{{a.sname}}</option>
				</select>
			</div>
		</div>
	</body>
	<script>
		var v=new Vue({
			el:"#sa",
			data:{
				student:[
					{sid:1,sname:"李畅"},
					{sid:2,sname:"李某人"},
					{sid:3,sname:"李人"}
				]

			},
			methods:{
			}
		})
	</script>
</html>

如果要去获取你选定的下拉框的值可以在div层中的select标签和vue的date中添加属性
代码如下
select标签添加属性@change=“chang()” v-model=“sid”

<div id="sa" >
			<div>
				<select @change="chang()" v-model="sid">
					<option v-for="(a,b) in student" v-bind:value="a.sid">{{a.sname}}</option>
				</select>
			</div>
		</div>

在data中添加sid属性和方法

data:{
				sid:2,
				student:[
					{sid:1,sname:"李畅"},
					{sid:2,sname:"李某人"},
					{sid:3,sname:"李人"}
				]

			},
methods:{
				chang:function(){
					console.log(this.sid);
				}
			}

效果如下图
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^