城市聯動是一種常見的網頁交互功能。在網頁應用中，用戶需要在城市選擇框中選取一個城市，該城市的地區選擇框才會被激活。本篇文章將會詳細介紹如何通過 Vue 實現城市聯動。

首先需要明確，Vue 實現城市聯動的思路是：給城市選擇框綁定 v-model，然后根據選擇的城市，動態渲染地區選擇框的數據并激活。下面是實現的具體步驟：

1. 在 Vue 實例中聲明城市和地區的數據。

data() {
return {
city: '',
district: []
}
}

2. 在城市選擇框中綁定 v-model。

<select v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select>

3. 在 Vue 實例中聲明城市和地區的數據。

watch: {
city: function(newValue, oldValue) {
if (newValue === '北京') {
this.district = ['朝陽區', '海淀區', '豐臺區']
} else if (newValue === '上海') {
this.district = ['浦東新區', '黃浦區', '虹橋區']
} else if (newValue === '廣州') {
this.district = ['天河區', '海珠區', '白云區']
}
}
}

4. 在地區選擇框中使用 v-if 根據城市選擇框的值來決定是否渲染。

<select v-if="city" v-model="district">
<option v-for="(item, index) in district" :key="index" :value="item">{{ item }}</option>
</select>

最終，城市聯動的實現就完成了。

除了常規的城市聯動，我們還可以對其進行一些優化和增強，比如使用 v-for 來自動生成城市和地區的選項，使用 computed 來統一管理城市和地區的數據，使用遞歸組件實現多級聯動等等。

總的來說，Vue 實現城市聯動相對來說比較簡單，只要掌握了其基本思路和技巧，就能夠輕松實現這一功能。希望本篇文章對大家有所幫助。