下拉選聯動是指當一個下拉選項被選擇時，另一個下拉選項的內容也會隨之發生變化。在Vue中，我們可以使用v-model指令和computed屬性來實現下拉選聯動功能。
首先，我們需要在HTML代碼中使用
<div id="app">
<select v-model="province">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Guangdong">廣東</option>
</select>
<select v-model="city">
<option v-for="item in cities" v-bind:value="item">{{ item }}</option>
</select>
</div>接下來，在Vue實例中定義province和city兩個變量，用于存儲用戶選擇的省份和城市。可以通過computed屬性來動態獲取city選項的內容。
var app = new Vue({
el: '#app',
data: {
province: '',
city: ''
},
computed: {
cities: function() {
switch(this.province) {
case 'Beijing':
return ['Dongcheng', 'Xicheng', 'Chaoyang'];
case 'Shanghai':
return ['Huangpu', 'Xuhui', 'Changning'];
case 'Guangdong':
return ['Guangzhou', 'Shenzhen', 'Dongguan'];
default:
return [];
}
}
}
})通過computed屬性，我們定義了cities計算屬性，根據用戶選中的province變量來動態獲取城市選項的內容。在上面的代碼中，我們使用了switch語句來對不同的省份進行判斷，并返回對應的城市數組。
最后，我們還需要對city選項進行限制，使其在用戶未選擇省份時不可用。可以通過v-bind:disabled屬性來實現這一功能。
<select v-model="city" v-bind:disabled="!province">
<option v-for="item in cities" v-bind:value="item">{{ item }}</option>
</select>在上面的代碼中，我們使用了v-bind:disabled屬性來綁定city選項的disabled屬性。當用戶未選擇省份時，!province返回true，city選項將變為不可用狀態，直到用戶選擇省份為止。
總的來說，使用Vue實現下拉選聯動功能是非常簡單的。通過v-model指令和computed屬性，我們可以輕松地實現省份和城市選項的聯動，提高用戶體驗和頁面交互性。