vue省市区三级联动的实现,vue省市联动组件
本文主要详细介绍Vue实现省市三级联动。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现省市三级联动的具体代码，供大家参考。具体内容如下
效果图：
代码：
！声明文档类型
超文本标记语言
头
meta charset=GBK
标题/标题
风格
/风格
/头
身体
div id=应用程序
select v-model= prov @ change= change city()；changeCity1()
选项v-for=(item，I)在items { item . name } }/option中
/选择
-select v-model= city @ change= change city 1
cityArr中的选项v-for=(item，I){ { item . name } }/option
/选择
-选择v-model=city1
city arr 1“{ item . name } }/option中的选项v-for=(item，I)
/选择
p您选择了：{{prov}}-{{city}}-{{city1}}/p
/div
/body
脚本src= vue . js /脚本
脚本
var id=1；
新Vue({
埃尔： #app ，
数据：{
证明：“北京”，
城市：，
城市1: ，
项目：[
{名称：北京，
sub:[
{name:北京，sub:[{name:北京11}，{name:北京12}，{name:北京13}]}，
{name:北京2 ，sub:[{name:北京21}，{name:北京22}，{name:北京23}]}，
]
},
{姓名：江西，
sub:[
{名称：南昌，sub:[{名称：高新区 }，{名称：西湖区 }，{名称：瑶湖区 }]}，
{名称：赣州，sub:[{名称：赣州1}，{名称：赣州2}，{名称：赣州3}]}，
{名称：福州，sub:[{名称：福州1}，{名称：福州2}，{名称：福州3}]}
]
}
],
cityArr:[]，
cityArr1:[]
},
已安装：function(){//执行默认选择
this . change city()；
this . change city 1()；
},
方法：{
city:function(){//省交换机
var me=this
var项目；
me . items . foreach(function(ele){
If(ele.name===me.prov){//判断是否等于prov，如果等于则表示所选省份被切换。
item=ele
}
})
如果(项目){
this . city arr=item . sub；//将所选项的sub设置为cityArr以显示城市。
this.city=item.sub[0]。姓名；//默认情况下选择第一个城市
this . city arr 1=[]；
this . city 1=“”；
}
},
city 1:function(){//城市切换
var me=this
var项目；
me . city arr . foreach(function(ele){
If(ele.name===me.city){//判断是否等于city，如果等于，则表示所选城市被切换。
item=ele
}
})
如果(项目){
this . city arr 1=item . sub；//将所选项的sub设置为显示区域的cityArr1。
this.city1=item.sub[0]。姓名；//默认情况下选择第一个区域
}
}
}
})
/脚本
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。