省市區聯動，又是乙個常見的元件。一般來說，通過select元素的onchange事件來實現，難度不大。而如今換作 vue 框架下，該如何實現呢？這正事我們接下來要**的，——但先請容我說，甚至比舊方法更簡單！——這就是來自資料驅動——mvvm 的威力！
什麼是資料驅動呢？往大的說，可以很大（fei hua），且不同場景或上下文之下有微妙差別的解釋——而就本文一說，其概念所對映的實物便是 json。一旦觀察到資料有任何異樣（或說變動），所關聯的 ui 也會實時地跟著改！卻無須程式設計師給出半句 dom **。於是我們這裡，連過去所依靠onchange事件都不用寫了。
我看過一些聯動元件，雖然使用了 vue.js 寫就元件但是依舊繫結 dom 的change事件，其實那大可不必，——使用資料驅動的話既優雅又簡單。筆者的這個元件，總行數不超過 70 行。
依賴 js 檔案：。
直接使用：。
設定值：
province-code
="$"
city-code
="$"
district-code
="$"
>
aj-china-area
>
屬性含義
型別是否必填，預設值
provincecode
省份**
string
ncitycode
市**string
ndistrictcode
區**string
對於上圖這種樣式，加入下面的 css。
.aj-china-area span
vue省市區三聯動下拉選擇元件的實現
我們曾經經常會遇到需要選擇省市區的需求,我們可能是找乙個外掛程式來實現,但是有了vue之後,我們自己完全可以簡單的實現這個效果,並封裝為獨立的.vue元件,便於日後使用 我們今天來實現乙個 利用vuejs開發的 省市區三聯動的元件 cityselect.vue元件 首先來看一下最終的效果 沒有寫太多...
在vue中實現省市區的下拉聯動
drop table if exists region create table region id bigint 20 unsigned not null auto increment comment 該地區的自增id parent id bigint 20 unsigned null defau...
省市區聯動選擇
js 本來返回的是地區編號，需要在後台轉換，這裡我改了一點，直接在js 裡就轉換了，返回的就是地區名 原理是js 控制的聯動查詢，通過一些判斷語句 將選擇的結果另外放在了隱藏的輸入框裡，後台讀取隱藏的輸入框就好，如將出生省份的值存到了id為txtchildrenprovince的輸入框 docume...