vue 联动

最新推荐文章于 2023-11-13 16:22:41 发布

luck5154

最新推荐文章于 2023-11-13 16:22:41 发布

阅读量629

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/luck5154/article/details/53083764

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>


<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/lodash.min.js"></script>
<style type="">
.on{
background: #ccc
}

</style>
<script type="text/javascript">
window.οnlοad=function(){
Vue.component("linkage",{
template:'#linkage',
props:{
Data:Array,
},
data:function(){
return{
selectOne:'',
citylist:[]
}
},
methods:{
change:function(){

var selectOne=this.selectOne
if(selectOne=="请选择"){
this.citylist=""
}else{
var onelist =_.find(this.Data,function(data){
return data.name ==selectOne
})
this.citylist=onelist.city
}
console.log(selectOne)
return this.citylist
}
},
computed:{


}
})
var vm =new Vue({
el:".main",
data:{
getData:[]
},
ready:function(){
this.getDatafun()
},
methods:{
getDatafun:function(){
this.$http.get('push.json')
.then((response)=>{
this.$set('getData',response.data.data)

})
.catch(function(response){
console.log(response)
})
}
}
})
}
</script>
<script type="text/x-template" id="linkage">
<select v-model="selectOne" @change="change">
<option selected>请选择</option>

<option v-for="one in Data" >
{{one.name}}
</option>
</select>
<select>
<option selected>请选择</option>
<option v-for="two in citylist" track-by="$index" >
{{two}}
</option>
</select>
<p>{{citylist}}</p>

</script>
</head>

<body>
<div class="main" >
<linkage
:Data="getData"
>

</linkage>
</div>
</body>

</html>

JSON

{
"data":[
{
"name":"北京",
"city":["海淀","朝阳","昌平","丰台","东城区","海淀"]

},
{
"name":"河北",
"city":["石家庄","张家口","保定","唐山","衡水","海淀"]

},
{
"name":"河南",
"city":["郑州","信阳","洛南","丰台","东城区","海淀"]

}

]

}