選擇聯(lián)動是一個常見的需求，例如在填寫表單時，用戶選擇了某一個選項，另一個選項的可選內(nèi)容就會隨之改變。Vue.js是一個非常流行的前端框架，提供了非常方便的數(shù)據(jù)綁定和響應(yīng)式更新能力，可以輕松實現(xiàn)選擇聯(lián)動效果。

在Vue中實現(xiàn)選擇聯(lián)動，需要依靠其提供的指令和computed屬性。指令是Vue中很重要的概念，可以在模板中綁定特定的數(shù)據(jù)和行為。computed屬性也是Vue中非常重要的概念，用于計算響應(yīng)式的值。

<div id="app">
<select v-model="selectedCountry">
<option v-for="country in countries" :value="country">{{ country }}</option>
</select>
<select v-model="selectedCity">
<option v-for="city in cities" :value="city">{{ city }}</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selectedCountry: '',
selectedCity: '',
countries: [
'中國',
'美國',
'英國'
],
cities: []
},
watch: {
// 監(jiān)聽selectedCountry的變化
selectedCountry: function(newVal, oldVal) {
// 根據(jù)選中的國家計算城市列表
if (newVal == '中國') {
this.cities = [
'北京',
'上海',
'廣州',
'深圳'
];
} else if (newVal == '美國') {
this.cities = [
'紐約',
'洛杉磯',
'芝加哥',
'舊金山'
];
} else if (newVal == '英國') {
this.cities = [
'倫敦',
'曼徹斯特',
'利物浦',
'愛丁堡'
];
} else {
this.cities = [];
}
// 重置城市選項
this.selectedCity = '';
}
}
});
</script>

在上面的代碼中，我們創(chuàng)建了一個Vue實例，定義了selectedCountry和selectedCity兩個數(shù)據(jù)，用于綁定兩個select列表的選中值。countries和cities數(shù)組分別表示國家和城市的可選項。

在Vue的選項對象中使用watch選項，定義了對selectedCountry的監(jiān)聽。當(dāng)selectedCountry的值發(fā)生變化時，watch回調(diào)函數(shù)就會被調(diào)用。我們在回調(diào)函數(shù)中根據(jù)selectedCountry的值計算出對應(yīng)國家的城市列表，并將結(jié)果賦值給cities數(shù)組。最后還需要重置selectedCity的值，以免用戶選擇了一個不存在的城市。

由于Vue.js提供了非常方便的數(shù)據(jù)綁定和響應(yīng)式更新能力，因此在實現(xiàn)選擇聯(lián)動時非常方便。只需要定義好數(shù)據(jù)和相應(yīng)的計算邏輯，在模板中使用v-model指令綁定數(shù)據(jù)的更新，就可以輕松實現(xiàn)選擇聯(lián)動效果。