Vue实现两个 select 联动
任务： 第一个select为省份第二个select为对应省份的城市改变省份 对应的城市一会改变如图：实现： 动态变化想道用v-model绑定 ， 但是如果绑定数据点击城市后，不会改变旧值，所以要绑定计算属性。<!DOCTYPE html><html><head><meta charset="utf-8"><title></title
·
任务： 第一个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>
前往低代码交流专区
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)