在網頁中，我們經常需要給鏈接設置 href 屬性，從而指向不同的頁面。這個屬性的值通常寫死在 HTML 中，并不能夠根據不同的情景動態變化。但是，如果你使用了 Vue，那么設置 href 就可以變得非常靈活了。在 Vue 中，我們可以通過綁定 v-bind:href 屬性來動態設置鏈接所指向的地址。 使用 v-bind:href 綁定屬性，我們可以通過 JavaScript 表達式來計算鏈接的目標地址。例如，我們可以在 Vue 組件中定義一個 data 屬性，然后使用這個屬性來動態計算 href 的值。下面是一個簡單的示例：

// 在 Vue 實例中定義一個 data 屬性，用于保存當前頁面的編號
var app = new Vue({
el: '#app',
data: {
currentPage: 1
}
})
// 在模板中使用 v-bind:href 綁定 href 屬性，動態計算鏈接的目標地址
<a v-bind:href="'/page/' + app.currentPage">Go to page {{ app.currentPage }}</a>

在這個例子中，我們定義了一個名為 currentPage 的 data 屬性，用于保存當前頁面的編號。然后，我們在模板中使用 v-bind:href 綁定 href 屬性，并動態計算鏈接的目標地址。通過在表達式中使用 app.currentPage 取得當前頁面編號，并將它拼接成完整的 URL。 當我們修改 currentPage 屬性的值時，Vue 會自動更新鏈接的 href 屬性，指向新的頁面。這樣，我們就可以動態地切換鏈接的目標地址了。 除了直接計算鏈接的目標地址外，我們還可以通過計算屬性來動態設置 href。計算屬性是計算出一個新的屬性，然后返回這個屬性或使用該屬性。

// 在 Vue 實例中定義一個 data 屬性，用于保存當前頁面的編號
var app = new Vue({
el: '#app',
data: {
currentPage: 1
},
// 定義一個計算屬性，計算出鏈接的目標地址
computed: {
pageUrl: function () {
return '/page/' + this.currentPage
}
}
})
// 在模板中使用 v-bind:href 綁定計算屬性 pageUrl
<a v-bind:href="pageUrl">Go to page {{ app.currentPage }}</a>

在這個例子中，我們定義了一個名為 pageUrl 的計算屬性，它計算出鏈接的目標地址。在模板中，我們使用 v-bind:href 綁定這個計算屬性，從而動態設置鏈接的 href 屬性。 當我們修改 currentPage 屬性的值時，Vue 會根據計算屬性的邏輯自動重新計算 pageUrl 屬性的值，并且將其更新到鏈接的 href 屬性上。 綜上所述，在 Vue 中動態設置 href 意味著我們可以根據不同的情況生成鏈接的目標地址，從而實現鏈接的動態切換。無論是直接計算還是通過計算屬性來動態設置 href，都非常方便而靈活。這是 Vue 帶來的強大功能之一，讓我們更加輕松地構建動態交互的網頁應用。