Vue实现两个 select 联动

任务：第一个select为省份第二个select为对应省份的城市改变省份对应的城市一会改变如图：实现：动态变化想道用v-model绑定，但是如果绑定数据点击城市后，不会改变旧值，所以要绑定计算属性。<!DOCTYPE html><html><head><meta charset="utf-8"><title></title

温肉

4857人浏览 · 2020-12-17 22:30:40

温肉 · 2020-12-17 22:30:40 发布

任务：第一个select为省份第二个select为对应省份的城市

改变省份对应的城市一会改变

如图：
在这里插入图片描述

实现：动态变化想道用v-model绑定，但是如果绑定数据点击城市后，不会改变旧值，所以要绑定计算属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/city.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/provinces.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<div id="app">
			<select @change="change($event)" v-model="checked">
				<option v-for="item in pr.head" :value="item.text" >{{item.text}}</option>
			</select>

			<select v-model="follow">
				<option v-for="item in city.head" v-show="checked == item.pid" >
					{{item.text}}
				</option>
			</select>
			
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
					city,
					pr,
					checked:'江苏省'
				},
				methods:{
					change(event){		
						this.checked = event.target.value
					},
				},
				computed:{
					follow(){
						for (var i = 0; i < city.head.length; i++) {
							if(city.head[i].pid == this.checked)
								return city.head[i].text
						}
					}
				}
			})
		</script>
	</body>
</html>

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