Vue 城市聯動是一種常見的 Web 開發技術,通常應用于地區篩選等場景,旨在實現城市和省份之間的聯動篩選。
下面給出一個簡單的案例代碼示例:
// 定義省份和城市數據
var provinces = [{name:'北京',cities:['東城','西城','朝陽'...]},{name:'江蘇',cities:['南京','蘇州','鎮江'...]},...];
var cities = {'北京':['東城','西城','朝陽'...],'南京':['玄武','鼓樓','浦口'...]...};
// 綁定省份下拉列表// 綁定城市下拉列表// Vue 實例
new Vue({
el:'#app',
data:{
provinces:provinces,
cities:cities,
selectedProvince:'',
selectedCity:''
}
});
以上代碼定義了省份和城市的數據,以及將其綁定到省份和城市下拉列表中。通過 Vue 實例的數據綁定機制,當用戶選擇省份時,城市下拉列表會根據所選省份動態更新。
總體而言,Vue 城市聯動是一種簡單而實用的技術。通過數據綁定和動態更新,可以使用戶在選擇城市和省份時更加順暢和方便。