在前端開發(fā)中，實(shí)現(xiàn)Select聯(lián)動(dòng)功能是比較常見的需求。Vue框架提供了非常方便的方式來(lái)實(shí)現(xiàn)Select聯(lián)動(dòng)。接下來(lái)我們將通過(guò)實(shí)際代碼演示如何使用Vue來(lái)實(shí)現(xiàn)Select聯(lián)動(dòng)功能。

//實(shí)現(xiàn)Select聯(lián)動(dòng)的Vue代碼
<div id="app">
<select v-model="prov">
<option v-for="p in provList" :value="p">{{p}}</option>
</select>
<select v-model="city">
<option v-for="c in cityList" :value="c">{{c}}</option>
</select>
</div>
<script>
new Vue({
el: '#app',
data: {
prov: '',
city: '',
provList: ['北京', '上海', '廣東'],
cityList: {
'北京': ['朝陽(yáng)區(qū)', '海淀區(qū)', '東城區(qū)'],
'上海': ['浦東新區(qū)', '徐匯區(qū)', '靜安區(qū)'],
'廣東': ['廣州市', '深圳市', '珠海市']
}
},
watch: {
prov: function(val) {
this.city = this.cityList[val][0];
}
}
});
</script>

在上面的代碼中，我們定義了兩個(gè)Select標(biāo)簽，prov用來(lái)展示省份列表，city用來(lái)展示城市列表。這兩個(gè)Select標(biāo)簽的值都綁定了Vue實(shí)例中的data。provList數(shù)組包含了所有的省份信息，cityList是一個(gè)對(duì)象，key代表了省份，value是一個(gè)城市數(shù)組。

在Vue實(shí)例中，我們通過(guò)watch來(lái)監(jiān)聽prov的變化。當(dāng)prov的值發(fā)生變化的時(shí)候，我們?cè)赾ityList對(duì)象中根據(jù)省份的key找到對(duì)應(yīng)的城市數(shù)組，并將數(shù)組的第一個(gè)元素賦值給city。這樣在省份變化的時(shí)候，城市Select標(biāo)簽會(huì)自動(dòng)更新為新的城市列表。

在開發(fā)中，我們也可以根據(jù)實(shí)際需求來(lái)優(yōu)化代碼。比如，將數(shù)據(jù)從Vue實(shí)例的data中分離出來(lái)，通過(guò)AJAX請(qǐng)求獲取數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)Select聯(lián)動(dòng)等。