Vue實現(xiàn)省市區(qū)三級聯(lián)動
更新時間：2020年12月27日 09:49:27 作者：學習永遠不會晚
這篇文章主要為大家詳細介紹了Vue實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)省市區(qū)三級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<style>
</style>
</head>
<body>
<div id="app" >
<select v-model='prov' @change="changeCity();changeCity1()">
<option v-for="(item,i) in items">{{item.name}}</option>
</select>
-- <select v-model='city' @change="changeCity1">
<option v-for="(item,i) in cityArr">{{item.name}}</option>
</select>
-- <select v-model='city1'>
<option v-for="(item,i) in cityArr1">{{item.name}}</option>
</select>
<p>您選中的是：{{prov}}-{{city}}-{{city1}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
var id=1;
new Vue({
el:'#app',
data:{
prov:'北京',
city:'',
city1:'',
items:[
{name:'北京',
sub:[
{name:'北京市',sub:[{name:'北京市11'},{name:'北京市12'},{name:'北京市13'}]},
{name:'北京市2',sub:[{name:'北京市21'},{name:'北京市22'},{name:'北京市23'}]},
]
},
{name:'江西',
sub:[
{name:'南昌市',sub:[{name:'高新區(qū)'},{name:'西湖區(qū)'},{name:'瑤湖區(qū)'}]},
{name:'贛州市',sub:[{name:'贛州市1'},{name:'贛州市2'},{name:'贛州市3'}]},
{name:'撫州市',sub:[{name:'撫州市1'},{name:'撫州市2'},{name:'撫州市3'}]}
]
}
],
cityArr:[],
cityArr1:[]
},
mounted:function(){//執(zhí)行默認選擇
this.changeCity();
this.changeCity1();
},
methods:{
changeCity:function(){//省切換
var me=this;
var item ;
me.items.forEach(function(ele){
if(ele.name===me.prov){//判斷與prov是否相等，相等的表示被切換選中的省份
item = ele;
}
})
if(item){
this.cityArr=item.sub;//將選中的item的sub設(shè)置給cityArr 用于顯示市
this.city=item.sub[0].name;//默認選擇第一個市
this.cityArr1=[];
this.city1='';
}
},
changeCity1:function(){//市切換
var me=this;
var item ;
me.cityArr.forEach(function(ele){
if(ele.name===me.city){//判斷與city是否相等，相等的表示被切換選中的市
item = ele;
}
})
if(item){
this.cityArr1=item.sub;//將選中的item的sub設(shè)置給cityArr1 用于顯示區(qū)
this.city1=item.sub[0].name;//默認選擇第一個區(qū)
}
}
}
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue 地區(qū)選擇器v-distpicker的常用功能
- 詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得
- vue實現(xiàn)三級聯(lián)動動態(tài)菜單
- Vue自定義省市區(qū)三級聯(lián)動
- vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例
- vue移動端城市三級聯(lián)動組件使用詳解
- 基于Vue2實現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
- 使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
- Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
相關(guān)文章
本文主要介紹了el-date-picker日期范圍限制的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要給大家介紹了關(guān)于如何使用vuex實現(xiàn)兄弟組件通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
elementUI select組件默認選中效果實現(xiàn)的方法
這篇文章主要介紹了elementUI select組件默認選中效果實現(xiàn)的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vue拖拽組件(Draggable)是一個允許與View-Model同步進行拖放排序的Vue組件,下面這篇文章主要給大家介紹了關(guān)于Vue.Draggable使用文檔的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
在前后端的開發(fā)中總是難免會遇到前后端的跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue2中vue.config.js簡單配置代理跨域的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了Vue2中的組件通信方式，文中通過示例進行了詳細的介紹，對我們學習Vue有一定的幫助，感興趣的小伙伴可以了解一下2022-07-07
vue-print-nb實現(xiàn)頁面打印功能實例(含分頁打印)
在項目中,有時需要打印頁面的表格,在網(wǎng)上找了一個打印組件vue-print-nb,用了還不錯,所以下面這篇文章主要給大家介紹了關(guān)于vue-print-nb實現(xiàn)頁面打印功能的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法
這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
關(guān)于在vue-cli中使用微信自動登錄和分享的實例
本篇文章主要介紹了關(guān)于在vue-cli中使用微信自動登錄和分享的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要來和大家詳細探討一下Vue2中是如何監(jiān)聽數(shù)組的變化的,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03