Vue.js 中v-for和v-if一起使用，来判断select中的option为选中项【开发记录】

1、刚写了一篇有关地址管理页面的总结，其中有如何判断多个radio中哪一个radio被checked和实现点击radio以后选中或取消，有兴趣的可以看下：判断多个radio中哪个被checked，网上有很多Vue.js使用v-for和v-if在多个select中判断哪一个option被选中的例子，但是不是特别的详细，其实select和radio原理上实现方式是大体是相同的，趁着手热，下面就来继续做

你好像很好吃a

4715人浏览 · 2019-12-11 16:55:57

你好像很好吃a · 2019-12-11 16:55:57 发布

2、思路：首先通过v-for循环将数据添加到select中，并为元素添加一个value属性，将能区分selected哪个option的数据添加到value中（我们这里是将每个option的id存放到value中），这个值方便我们后期判断我们到底选中了哪个option，再为元素添加@change事件，当select改变时会调用@change方法，然后并将当前selected的option的dom对象以参数的形式传递到method中（我们这里是changeVal方法），在方法中将id赋值给data中selOption（说明当前id的option被选中了），然后通过v-model来将data中的selOption、select和下面div中的显示数据同步（这步是为了在页面上显示数据，其实不要也罢，看实际需求）。

3、demo代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<div id="div">
		<select @change="changeVal($event)" v-model="selOption">
			<template v-for="(site,index) in sites" :key="index">
				<option :value="site.id">{{site.name}}</option>
			</template>
		</select>
		<div>您选中了:{{selOption}}</div>
	</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
	var vm = new Vue({
		el:"#div",
		data:{
			selOption: "",
			sites: [
				{id:1,name:"北京"},
				{id:2,name:"上海"},
				{id:3,name:"广州"},
				{id:4,name:"深圳"},
				{id:5,name:"吉林"}
			]
		},
		methods:{
			changeVal:function(event){
				this.selOption = event.target.value;
				alert("你选中了"+this.selOption);
			}
		}
	})
</script>
</html>

4、说明：
1）这里的data中的数据是写死的，实际开发中应该使用mounted来声明一个方法，然后在方法中通过ajax去后端获取并赋值到data中，实现数据为动态数据。
2）还有就是Vue.js是通过$event的方式来传递当前元素的dom对象，并在方法中以event参数的形式接受，并以event.target的方式使用该对象。

你要去做一个大人，不要回头，不要难过。

“你为什么皱着眉头呀，不开心嘛，能不能跟我说说呢。”

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}$/, //不连续的两位字母// /^