Vue实现两个 select 联动

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


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

如图:
Vue实现两个 select 联动_第1张图片
Vue实现两个 select 联动_第2张图片
Vue实现两个 select 联动_第3张图片

实现: 动态变化想道用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)