<!DOCTYPE html>
<html>
<head>
<title>第一个vue界面</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="my">
<p>{{province}}</p>
<select v-model='province' @change="updateCity();updateDistrict()">
<option v-for="v in arr">{{v.name}}</option>
</select>
<p>{{city}}</p>
<select v-model='city' @change="updateDistrict()">
<option v-for="v in cityArr">{{v.name}}</option>
</select>
<p>{{district}}</p>
<select v-model='district' v-if="district">
<option v-for="v in districtArr">{{v.name}}</option>
</select>
</div>
</body>
</html>
<script type="text/javascript" src="demo.js"></script>
window.onload = function(){
var myvue = new Vue({
el:'#my',
data:{
province:'北京',
city:'北京',
district:'',
cityArr:[],
districtArr:[],
arr:[{
name:'北京',
sub:[
{name:'请选择',sub:[]},
{
name:'北京',
sub:[{name:'请选择'},{name:'东城区'},{name:'西城区'},{name:'平谷区'},]
},
]
},
{
name:'陕西',
sub:[
{name:'请选择',sub:[]},
{
name:'西安',
sub:[{name:'请选择'},{name:'长安区'},{name:'未央区'},{name:'韦曲南'},]
},
{
name:'渭南',
sub:[{name:'大荔'},{name:'韩城'},{name:'合阳'},{name:'华县'},]
}
]
},
]
},
methods:{
updateCity:function(){ //更新市数据
var self = this;
this.arr.forEach(function(item,index){
if(item.name == self.province){
self.cityArr = item.sub;
}
});
// 选择一级后,二级的城市名要跟着改变
self.city = self.cityArr[1].name;
},
updateDistrict:function(){ //更新市数据
var self = this;
this.cityArr.forEach(function(item,index){
if(item.name == self.city){
self.districtArr = item.sub;
}
});
if(self.districtArr && self.districtArr.length>0){
self.district = self.districtArr[1].name;
}else{
self.district='';
}
}
},
mounted:function(){
this.updateCity();
this.updateDistrict();
}
})
}