VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
更新時(shí)間：2018年02月09日 10:50:54 作者：lllo3o
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
TIPs：
用了element UI的select選擇器 <el-select>。
換成普通select也差不多。
數(shù)據(jù)沒(méi)寫(xiě)南海諸島，沒(méi)寫(xiě)默認(rèn)全國(guó)。
HTML：
<!--聯(lián)動(dòng)選擇地區(qū)-->
<el-form-item label="選擇地區(qū)：">
<el-select size="small" style="width: 100px"
v-model="selectProv"
placeholder="請(qǐng)選擇省份"
v-on:change="getProv($event)">
<el-option
v-for="item in provs"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select size="small" style="width: 100px"
v-if="selectProv!=''"
v-model="selectCity"
placeholder="請(qǐng)選擇城市"
v-on:change="getCity($event)">
<el-option
v-for="item in citys"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
JS：
export default {
data() {
return {
provs:[{label:"北京市",value:"北京市"},
{label:"天津市",value:"天津市"},
{label:"河北省",value:"河北省"},
{label:"山西省",value:"山西省"},
{label:"內(nèi)蒙古自治區(qū)",value:"內(nèi)蒙古自治區(qū)"},
{label:"遼寧省",value:"遼寧省"},
{label:"吉林省",value:"吉林省"},
{label:"黑龍江省",value:"黑龍江省"},
{label:"上海市",value:"上海市"},
{label:"江蘇省",value:"江蘇省"},
{label:"浙江省",value:"浙江省"},
{label:"安徽省",value:"安徽省"},
{label:"福建省",value:"福建省"},
{label:"江西省",value:"江西省"},
{label:"山東省",value:"山東省"},
{label:"河南省",value:"河南省"},
{label:"湖北省",value:"湖北省"},
{label:"湖南省",value:"湖南省"},
{label:"廣東省",value:"廣東省"},
{label:"廣西壯族自治區(qū)",value:"廣西壯族自治區(qū)"},
{label:"海南省",value:"海南省"},
{label:"重慶市",value:"重慶市"},
{label:"四川省",value:"四川省"},
{label:"貴州省",value:"貴州省"},
{label:"云南省",value:"云南省"},
{label:"西藏自治區(qū)",value:"西藏自治區(qū)"},
{label:"陜西省",value:"陜西省"},
{label:"甘肅省",value:"甘肅省"},
{label:"青海省",value:"青海省"},
{label:"寧夏回族自治區(qū)",value:"寧夏回族自治區(qū)"},
{label:"新疆維吾爾自治區(qū)",value:"新疆維吾爾自治區(qū)"},
{label:"臺(tái)灣省",value:"臺(tái)灣省"},
{label:"香港特別行政區(qū)",value:"香港特別行政區(qū)"},
{label:"澳門(mén)特別行政區(qū)",value:"澳門(mén)特別行政區(qū)"}] ,
citys: [],
selectProv: '',
selectCity: ''
}
},
methods: {
/*二級(jí)聯(lián)動(dòng)選擇地區(qū)*/
getProv: function (prov) {
let tempCity=[];
this.citys=[];
this.selectCity='';
let allCity=[{
prov: "北京市",
label: "北京市"
}, {
prov: "天津市",
label: "天津市"
}, {
prov: "河北省",
label: "石家莊市"
}, {
prov: "河北省",
label: "唐山市"
}, {
prov: "河北省",
label: "秦皇島市"
}, {
prov: "河北省",
label: "邯鄲市"
}, {
prov: "河北省",
label: "邢臺(tái)市"
}, {
prov: "河北省",
label: "保定市"
}, {
prov: "河北省",
label: "張家口市"
}, {
prov: "河北省",
label: "承德市"
}, {
prov: "河北省",
label: "滄州市"
}, {
prov: "河北省",
label: "廊坊市"
}, {
prov: "河北省",
label: "衡水市"
}, {
prov: "山西省",
label: "太原市"
}, {
prov: "山西省",
label: "大同市"
}, {
prov: "山西省",
label: "陽(yáng)泉市"
}, {
prov: "山西省",
label: "長(zhǎng)治市"
}, {
prov: "山西省",
label: "晉城市"
}, {
prov: "山西省",
label: "朔州市"
}, {
prov: "山西省",
label: "晉中市"
}, {
prov: "山西省",
label: "運(yùn)城市"
}, {
prov: "山西省",
label: "忻州市"
}, {
prov: "山西省",
label: "臨汾市"
}, {
prov: "山西省",
label: "呂梁市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "呼和浩特市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "包頭市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "烏海市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "赤峰市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "通遼市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "鄂爾多斯市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "呼倫貝爾市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "巴彥淖爾市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "烏蘭察布市"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "興安盟"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "錫林郭勒盟"
}, {
prov: "內(nèi)蒙古自治區(qū)",
label: "阿拉善盟"
}, {
prov: "遼寧省",
label: "沈陽(yáng)市"
}, {
prov: "遼寧省",
label: "大連市"
}, {
prov: "遼寧省",
label: "鞍山市"
}, {
prov: "遼寧省",
label: "撫順市"
}, {
prov: "遼寧省",
label: "本溪市"
}, {
prov: "遼寧省",
label: "丹東市"
}, {
prov: "遼寧省",
label: "錦州市"
}, {
prov: "遼寧省",
label: "營(yíng)口市"
}, {
prov: "遼寧省",
label: "阜新市"
}, {
prov: "遼寧省",
label: "遼陽(yáng)市"
}, {
prov: "遼寧省",
label: "盤(pán)錦市"
}, {
prov: "遼寧省",
label: "鐵嶺市"
}, {
prov: "遼寧省",
label: "朝陽(yáng)市"
}, {
prov: "遼寧省",
label: "葫蘆島市"
}, {
prov: "吉林省",
label: "長(zhǎng)春市"
}, {
prov: "吉林省",
label: "吉林市"
}, {
prov: "吉林省",
label: "四平市"
}, {
prov: "吉林省",
label: "遼源市"
}, {
prov: "吉林省",
label: "通化市"
}, {
prov: "吉林省",
label: "白山市"
}, {
prov: "吉林省",
label: "松原市"
}, {
prov: "吉林省",
label: "白城市"
}, {
prov: "吉林省",
label: "延邊朝鮮族自治州"
}, {
prov: "黑龍江省",
label: "哈爾濱市"
}, {
prov: "黑龍江省",
label: "齊齊哈爾市"
}, {
prov: "黑龍江省",
label: "雞西市"
}, {
prov: "黑龍江省",
label: "鶴崗市"
}, {
prov: "黑龍江省",
label: "雙鴨山市"
}, {
prov: "黑龍江省",
label: "大慶市"
}, {
prov: "黑龍江省",
label: "伊春市"
}, {
prov: "黑龍江省",
label: "佳木斯市"
}, {
prov: "黑龍江省",
label: "七臺(tái)河市"
}, {
prov: "黑龍江省",
label: "牡丹江市"
}, {
prov: "黑龍江省",
label: "黑河市"
}, {
prov: "黑龍江省",
label: "綏化市"
}, {
prov: "黑龍江省",
label: "大興安嶺地區(qū)"
}, {
prov: "上海市",
label: "上海市"
}, {
prov: "江蘇省",
label: "南京市"
}, {
prov: "江蘇省",
label: "無(wú)錫市"
}, {
prov: "江蘇省",
label: "徐州市"
}, {
prov: "江蘇省",
label: "常州市"
}, {
prov: "江蘇省",
label: "蘇州市"
}, {
prov: "江蘇省",
label: "南通市"
}, {
prov: "江蘇省",
label: "連云港市"
}, {
prov: "江蘇省",
label: "淮安市"
}, {
prov: "江蘇省",
label: "鹽城市"
}, {
prov: "江蘇省",
label: "揚(yáng)州市"
}, {
prov: "江蘇省",
label: "鎮(zhèn)江市"
}, {
prov: "江蘇省",
label: "泰州市"
}, {
prov: "江蘇省",
label: "宿遷市"
}, {
prov: "浙江省",
label: "杭州市"
}, {
prov: "浙江省",
label: "寧波市"
}, {
prov: "浙江省",
label: "溫州市"
}, {
prov: "浙江省",
label: "嘉興市"
}, {
prov: "浙江省",
label: "湖州市"
}, {
prov: "浙江省",
label: "紹興市"
}, {
prov: "浙江省",
label: "金華市"
}, {
prov: "浙江省",
label: "衢州市"
}, {
prov: "浙江省",
label: "舟山市"
}, {
prov: "浙江省",
label: "臺(tái)州市"
}, {
prov: "浙江省",
label: "麗水市"
}, {
prov: "安徽省",
label: "合肥市"
}, {
prov: "安徽省",
label: "蕪湖市"
}, {
prov: "安徽省",
label: "蚌埠市"
}, {
prov: "安徽省",
label: "淮南市"
}, {
prov: "安徽省",
label: "馬鞍山市"
}, {
prov: "安徽省",
label: "淮北市"
}, {
prov: "安徽省",
label: "銅陵市"
}, {
prov: "安徽省",
label: "安慶市"
}, {
prov: "安徽省",
label: "黃山市"
}, {
prov: "安徽省",
label: "滁州市"
}, {
prov: "安徽省",
label: "阜陽(yáng)市"
}, {
prov: "安徽省",
label: "宿州市"
}, {
prov: "安徽省",
label: "六安市"
}, {
prov: "安徽省",
label: "亳州市"
}, {
prov: "安徽省",
label: "池州市"
}, {
prov: "安徽省",
label: "宣城市"
}, {
prov: "福建省",
label: "福州市"
}, {
prov: "福建省",
label: "廈門(mén)市"
}, {
prov: "福建省",
label: "莆田市"
}, {
prov: "福建省",
label: "三明市"
}, {
prov: "福建省",
label: "泉州市"
}, {
prov: "福建省",
label: "漳州市"
}, {
prov: "福建省",
label: "南平市"
}, {
prov: "福建省",
label: "龍巖市"
}, {
prov: "福建省",
label: "寧德市"
}, {
prov: "江西省",
label: "南昌市"
}, {
prov: "江西省",
label: "景德鎮(zhèn)市"
}, {
prov: "江西省",
label: "萍鄉(xiāng)市"
}, {
prov: "江西省",
label: "九江市"
}, {
prov: "江西省",
label: "新余市"
}, {
prov: "江西省",
label: "鷹潭市"
}, {
prov: "江西省",
label: "贛州市"
}, {
prov: "江西省",
label: "吉安市"
}, {
prov: "江西省",
label: "宜春市"
}, {
prov: "江西省",
label: "撫州市"
}, {
prov: "江西省",
label: "上饒市"
}, {
prov: "山東省",
label: "濟(jì)南市"
}, {
prov: "山東省",
label: "青島市"
}, {
prov: "山東省",
label: "淄博市"
}, {
prov: "山東省",
label: "棗莊市"
}, {
prov: "山東省",
label: "東營(yíng)市"
}, {
prov: "山東省",
label: "煙臺(tái)市"
}, {
prov: "山東省",
label: "濰坊市"
}, {
prov: "山東省",
label: "濟(jì)寧市"
}, {
prov: "山東省",
label: "泰安市"
}, {
prov: "山東省",
label: "威海市"
}, {
prov: "山東省",
label: "日照市"
}, {
prov: "山東省",
label: "萊蕪市"
}, {
prov: "山東省",
label: "臨沂市"
}, {
prov: "山東省",
label: "德州市"
}, {
prov: "山東省",
label: "聊城市"
}, {
prov: "山東省",
label: "濱州市"
}, {
prov: "山東省",
label: "菏澤市"
}, {
prov: "河南省",
label: "鄭州市"
}, {
prov: "河南省",
label: "開(kāi)封市"
}, {
prov: "河南省",
label: "洛陽(yáng)市"
}, {
prov: "河南省",
label: "平頂山市"
}, {
prov: "河南省",
label: "安陽(yáng)市"
}, {
prov: "河南省",
label: "鶴壁市"
}, {
prov: "河南省",
label: "新鄉(xiāng)市"
}, {
prov: "河南省",
label: "焦作市"
}, {
prov: "河南省",
label: "濮陽(yáng)市"
}, {
prov: "河南省",
label: "許昌市"
}, {
prov: "河南省",
label: "漯河市"
}, {
prov: "河南省",
label: "三門(mén)峽市"
}, {
prov: "河南省",
label: "南陽(yáng)市"
}, {
prov: "河南省",
label: "商丘市"
}, {
prov: "河南省",
label: "信陽(yáng)市"
}, {
prov: "河南省",
label: "周口市"
}, {
prov: "河南省",
label: "駐馬店市"
}, {
prov: "河南省",
label: "省直轄縣級(jí)行政區(qū)劃"
}, {
prov: "湖北省",
label: "武漢市"
}, {
prov: "湖北省",
label: "黃石市"
}, {
prov: "湖北省",
label: "十堰市"
}, {
prov: "湖北省",
label: "宜昌市"
}, {
prov: "湖北省",
label: "襄陽(yáng)市"
}, {
prov: "湖北省",
label: "鄂州市"
}, {
prov: "湖北省",
label: "荊門(mén)市"
}, {
prov: "湖北省",
label: "孝感市"
}, {
prov: "湖北省",
label: "荊州市"
}, {
prov: "湖北省",
label: "黃岡市"
}, {
prov: "湖北省",
label: "咸寧市"
}, {
prov: "湖北省",
label: "隨州市"
}, {
prov: "湖北省",
label: "恩施土家族苗族自治州"
}, {
prov: "湖北省",
label: "省直轄縣級(jí)行政區(qū)劃"
}, {
prov: "湖北省",
label: "仙桃市"
}, {
prov: "湖北省",
label: "潛江市"
}, {
prov: "湖北省",
label: "天門(mén)市"
}, {
prov: "湖北省",
label: "神農(nóng)架林區(qū)"
}, {
prov: "湖南省",
label: "長(zhǎng)沙市"
}, {
prov: "湖南省",
label: "株洲市"
}, {
prov: "湖南省",
label: "湘潭市"
}, {
prov: "湖南省",
label: "衡陽(yáng)市"
}, {
prov: "湖南省",
label: "邵陽(yáng)市"
}, {
prov: "湖南省",
label: "岳陽(yáng)市"
}, {
prov: "湖南省",
label: "常德市"
}, {
prov: "湖南省",
label: "張家界市"
}, {
prov: "湖南省",
label: "益陽(yáng)市"
}, {
prov: "湖南省",
label: "郴州市"
}, {
prov: "湖南省",
label: "永州市"
}, {
prov: "湖南省",
label: "懷化市"
}, {
prov: "湖南省",
label: "婁底市"
}, {
prov: "湖南省",
label: "湘西土家族苗族自治州"
}, {
prov: "廣東省",
label: "廣州市"
}, {
prov: "廣東省",
label: "韶關(guān)市"
}, {
prov: "廣東省",
label: "深圳市"
}, {
prov: "廣東省",
label: "珠海市"
}, {
prov: "廣東省",
label: "汕頭市"
}, {
prov: "廣東省",
label: "佛山市"
}, {
prov: "廣東省",
label: "江門(mén)市"
}, {
prov: "廣東省",
label: "湛江市"
}, {
prov: "廣東省",
label: "茂名市"
}, {
prov: "廣東省",
label: "肇慶市"
}, {
prov: "廣東省",
label: "惠州市"
}, {
prov: "廣東省",
label: "梅州市"
}, {
prov: "廣東省",
label: "汕尾市"
}, {
prov: "廣東省",
label: "河源市"
}, {
prov: "廣東省",
label: "陽(yáng)江市"
}, {
prov: "廣東省",
label: "清遠(yuǎn)市"
}, {
prov: "廣東省",
label: "東莞市"
}, {
prov: "廣東省",
label: "中山市"
}, {
prov: "廣東省",
label: "潮州市"
}, {
prov: "廣東省",
label: "揭陽(yáng)市"
}, {
prov: "廣東省",
label: "云浮市"
}, {
prov: "廣西壯族自治區(qū)",
label: "南寧市"
}, {
prov: "廣西壯族自治區(qū)",
label: "柳州市"
}, {
prov: "廣西壯族自治區(qū)",
label: "桂林市"
}, {
prov: "廣西壯族自治區(qū)",
label: "梧州市"
}, {
prov: "廣西壯族自治區(qū)",
label: "北海市"
}, {
prov: "廣西壯族自治區(qū)",
label: "防城港市"
}, {
prov: "廣西壯族自治區(qū)",
label: "欽州市"
}, {
prov: "廣西壯族自治區(qū)",
label: "貴港市"
}, {
prov: "廣西壯族自治區(qū)",
label: "玉林市"
}, {
prov: "廣西壯族自治區(qū)",
label: "百色市"
}, {
prov: "廣西壯族自治區(qū)",
label: "賀州市"
}, {
prov: "廣西壯族自治區(qū)",
label: "河池市"
}, {
prov: "廣西壯族自治區(qū)",
label: "來(lái)賓市"
}, {
prov: "廣西壯族自治區(qū)",
label: "崇左市"
}, {
prov: "海南省",
label: "海口市"
}, {
prov: "海南省",
label: "三亞市"
}, {
prov: "海南省",
label: "三沙市"
}, {
prov: "海南省",
label: "省直轄縣級(jí)行政區(qū)劃"
}, {
prov: "海南省",
label: "五指山市"
}, {
prov: "海南省",
label: "瓊海市"
}, {
prov: "海南省",
label: "儋州市"
}, {
prov: "海南省",
label: "文昌市"
}, {
prov: "海南省",
label: "萬(wàn)寧市"
}, {
prov: "海南省",
label: "東方市"
}, {
prov: "海南省",
label: "定安縣"
}, {
prov: "海南省",
label: "屯昌縣"
}, {
prov: "海南省",
label: "澄邁縣"
}, {
prov: "海南省",
label: "臨高縣"
}, {
prov: "海南省",
label: "白沙黎族自治縣"
}, {
prov: "海南省",
label: "昌江黎族自治縣"
}, {
prov: "海南省",
label: "樂(lè)東黎族自治縣"
}, {
prov: "海南省",
label: "陵水黎族自治縣"
}, {
prov: "海南省",
label: "保亭黎族苗族自治縣"
}, {
prov: "海南省",
label: "瓊中黎族苗族自治縣"
}, {
prov: "重慶市",
label: "重慶市"
}, {
prov: "四川省",
label: "成都市"
}, {
prov: "四川省",
label: "自貢市"
}, {
prov: "四川省",
label: "攀枝花市"
}, {
prov: "四川省",
label: "瀘州市"
}, {
prov: "四川省",
label: "德陽(yáng)市"
}, {
prov: "四川省",
label: "綿陽(yáng)市"
}, {
prov: "四川省",
label: "廣元市"
}, {
prov: "四川省",
label: "遂寧市"
}, {
prov: "四川省",
label: "內(nèi)江市"
}, {
prov: "四川省",
label: "樂(lè)山市"
}, {
prov: "四川省",
label: "南充市"
}, {
prov: "四川省",
label: "眉山市"
}, {
prov: "四川省",
label: "宜賓市"
}, {
prov: "四川省",
label: "廣安市"
}, {
prov: "四川省",
label: "達(dá)州市"
}, {
prov: "四川省",
label: "雅安市"
}, {
prov: "四川省",
label: "巴中市"
}, {
prov: "四川省",
label: "資陽(yáng)市"
}, {
prov: "四川省",
label: "阿壩藏族羌族自治州"
}, {
prov: "四川省",
label: "甘孜藏族自治州"
}, {
prov: "四川省",
label: "涼山彝族自治州"
}, {
prov: "貴州省",
label: "貴陽(yáng)市"
}, {
prov: "貴州省",
label: "六盤(pán)水市"
}, {
prov: "貴州省",
label: "遵義市"
}, {
prov: "貴州省",
label: "安順市"
}, {
prov: "貴州省",
label: "畢節(jié)市"
}, {
prov: "貴州省",
label: "銅仁市"
}, {
prov: "貴州省",
label: "黔西南布依族苗族自治州"
}, {
prov: "貴州省",
label: "黔東南苗族侗族自治州"
}, {
prov: "貴州省",
label: "黔南布依族苗族自治州"
}, {
prov: "云南省",
label: "昆明市"
}, {
prov: "云南省",
label: "曲靖市"
}, {
prov: "云南省",
label: "玉溪市"
}, {
prov: "云南省",
label: "保山市"
}, {
prov: "云南省",
label: "昭通市"
}, {
prov: "云南省",
label: "麗江市"
}, {
prov: "云南省",
label: "普洱市"
}, {
prov: "云南省",
label: "臨滄市"
}, {
prov: "云南省",
label: "楚雄彝族自治州"
}, {
prov: "云南省",
label: "紅河哈尼族彝族自治州"
}, {
prov: "云南省",
label: "文山壯族苗族自治州"
}, {
prov: "云南省",
label: "西雙版納傣族自治州"
}, {
prov: "云南省",
label: "大理白族自治州"
}, {
prov: "云南省",
label: "德宏傣族景頗族自治州"
}, {
prov: "云南省",
label: "怒江傈僳族自治州"
}, {
prov: "云南省",
label: "迪慶藏族自治州"
}, {
prov: "西藏自治區(qū)",
label: "拉薩市"
}, {
prov: "西藏自治區(qū)",
label: "昌都地區(qū)"
}, {
prov: "西藏自治區(qū)",
label: "山南地區(qū)"
}, {
prov: "西藏自治區(qū)",
label: "日喀則地區(qū)"
}, {
prov: "西藏自治區(qū)",
label: "那曲地區(qū)"
}, {
prov: "西藏自治區(qū)",
label: "阿里地區(qū)"
}, {
prov: "西藏自治區(qū)",
label: "林芝地區(qū)"
}, {
prov: "陜西省",
label: "西安市"
}, {
prov: "陜西省",
label: "銅川市"
}, {
prov: "陜西省",
label: "寶雞市"
}, {
prov: "陜西省",
label: "咸陽(yáng)市"
}, {
prov: "陜西省",
label: "渭南市"
}, {
prov: "陜西省",
label: "延安市"
}, {
prov: "陜西省",
label: "漢中市"
}, {
prov: "陜西省",
label: "榆林市"
}, {
prov: "陜西省",
label: "安康市"
}, {
prov: "陜西省",
label: "商洛市"
}, {
prov: "甘肅省",
label: "蘭州市"
}, {
prov: "甘肅省",
label: "嘉峪關(guān)市"
}, {
prov: "甘肅省",
label: "金昌市"
}, {
prov: "甘肅省",
label: "白銀市"
}, {
prov: "甘肅省",
label: "天水市"
}, {
prov: "甘肅省",
label: "武威市"
}, {
prov: "甘肅省",
label: "張掖市"
}, {
prov: "甘肅省",
label: "平?jīng)鍪?
}, {
prov: "甘肅省",
label: "酒泉市"
}, {
prov: "甘肅省",
label: "慶陽(yáng)市"
}, {
prov: "甘肅省",
label: "定西市"
}, {
prov: "甘肅省",
label: "隴南市"
}, {
prov: "甘肅省",
label: "臨夏回族自治州"
}, {
prov: "甘肅省",
label: "甘南藏族自治州"
}, {
prov: "青海省",
label: "西寧市"
}, {
prov: "青海省",
label: "海東市"
}, {
prov: "青海省",
label: "海北藏族自治州"
}, {
prov: "青海省",
label: "黃南藏族自治州"
}, {
prov: "青海省",
label: "海南藏族自治州"
}, {
prov: "青海省",
label: "果洛藏族自治州"
}, {
prov: "青海省",
label: "玉樹(shù)藏族自治州"
}, {
prov: "青海省",
label: "海西蒙古族藏族自治州"
}, {
prov: "寧夏回族自治區(qū)",
label: "銀川市"
}, {
prov: "寧夏回族自治區(qū)",
label: "石嘴山市"
}, {
prov: "寧夏回族自治區(qū)",
label: "吳忠市"
}, {
prov: "寧夏回族自治區(qū)",
label: "固原市"
}, {
prov: "寧夏回族自治區(qū)",
label: "中衛(wèi)市"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "烏魯木齊市"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "克拉瑪依市"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "吐魯番地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "哈密地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "昌吉回族自治州"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "博爾塔拉蒙古自治州"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "巴音郭楞蒙古自治州"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "阿克蘇地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "克孜勒蘇柯?tīng)柨俗巫灾沃?
}, {
prov: "新疆維吾爾自治區(qū)",
label: "喀什地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "和田地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "伊犁哈薩克自治州"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "塔城地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "阿勒泰地區(qū)"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "自治區(qū)直轄縣級(jí)行政區(qū)劃"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "石河子市"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "阿拉爾市"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "圖木舒克市"
}, {
prov: "新疆維吾爾自治區(qū)",
label: "五家渠市"
}, {
prov: "臺(tái)灣省",
label: "臺(tái)北市"
}, {
prov: "臺(tái)灣省",
label: "高雄市"
}, {
prov: "臺(tái)灣省",
label: "基隆市"
}, {
prov: "臺(tái)灣省",
label: "臺(tái)中市"
}, {
prov: "臺(tái)灣省",
label: "臺(tái)南市"
}, {
prov: "臺(tái)灣省",
label: "新竹市"
}, {
prov: "臺(tái)灣省",
label: "嘉義市"
}, {
prov: "臺(tái)灣省",
label: "省直轄"
}, {
prov: "香港特別行政區(qū)",
label: "香港島"
}, {
prov: "香港特別行政區(qū)",
label: "九龍"
}, {
prov: "香港特別行政區(qū)",
label: "新界"
}, {
prov: "澳門(mén)特別行政區(qū)",
label: "澳門(mén)半島"
}, {
prov: "澳門(mén)特別行政區(qū)",
label: "澳門(mén)離島"
}, {
prov: "澳門(mén)特別行政區(qū)",
label: "無(wú)堂區(qū)劃分區(qū)域"
}];
for (var val of allCity){
if (prov == val.prov){
console.log(val);
tempCity.push({label: val.label, value: val.label})
}
}
this.citys = tempCity;
},
getCity: function (city) {
console.log(city);
console.log(this.selectCity)
}
},
mounted: function () {
},
updated: function () {
}
}
以上這篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)
- vue elementUI使用tabs與導(dǎo)航欄聯(lián)動(dòng)
- vue基于mint-ui的城市選擇3級(jí)聯(lián)動(dòng)的示例
- vue基于mint-ui實(shí)現(xiàn)城市選擇三級(jí)聯(lián)動(dòng)
- 詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)
- vue mint-ui 實(shí)現(xiàn)省市區(qū)街道4級(jí)聯(lián)動(dòng)示例(仿淘寶京東收貨地址4級(jí)聯(lián)動(dòng))
- Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼
- vue左右側(cè)聯(lián)動(dòng)滾動(dòng)的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果
相關(guān)文章
這Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下2018-08-08
Vue使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了Vue中使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了vue子路由跳轉(zhuǎn)實(shí)現(xiàn)tab選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3父子組件傳值?雙向綁定及注意問(wèn)題小結(jié)
這篇文章主要介紹了Vue3中如何通過(guò)v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)注冊(cè)與登錄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式
在看element-ui的源碼的時(shí)候，注意到源碼里面有很多地方使用provide和inject的屬性，本文主要介紹了vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式，分享給大家，感興趣的可以了解一下2021-05-05
Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的方法實(shí)例
在前端開(kāi)發(fā)過(guò)程當(dāng)中,當(dāng)后臺(tái)服務(wù)器開(kāi)發(fā)數(shù)據(jù)還沒(méi)完善,沒(méi)法與咱們交接時(shí),咱們習(xí)慣在本地寫(xiě)上一個(gè)json文件做模擬數(shù)據(jù)測(cè)試代碼效果是否有問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue中請(qǐng)求本地JSON文件并返回?cái)?shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02