Vue 中 v-bind 和 v-model 的區(qū)別

在 Vue.js 中，v-bind 和 v-model 是兩個不同的指令，用于綁定 HTML 元素的屬性和數(shù)據(jù)。

v-bind

用途：用于動態(tài)綁定 HTML 元素的屬性值。

語法：

功能：會在元素被渲染時將表達式的值綁定到指定的屬性中。

v-model

用途：用于雙向綁定 HTML 元素的輸入值和 Vue 實例中的數(shù)據(jù)。

語法：

功能：會在元素被渲染時將 Vue 實例中的數(shù)據(jù)綁定到元素的 value 屬性，同時也會監(jiān)聽元素的輸入事件，使其值的變化同步反映到 Vue 實例中。

區(qū)別

綁定方式：v-bind 單向綁定，僅從 Vue 實例向 HTML 元素傳遞數(shù)據(jù)。而 v-model 雙向綁定，可以在 Vue 實例和 HTML 元素之間相互傳遞數(shù)據(jù)。

默認屬性：v-bind 默認綁定 HTML 元素的屬性值。而 v-model 默認綁定元素的 value 屬性。

更新時序：v-bind 在 Vue 實例的數(shù)據(jù)改變時更新元素的屬性。而 v-model 在元素的輸入事件觸發(fā)時更新 Vue 實例的數(shù)據(jù)。

示例

使用 v-bind：

<code><button v-bind:disabled="loading">加載中</button></code>

使用 v-model：

<code><input v-model="name"></code>

v-bind 和 v-model 是 Vue 中兩個重要的指令，分別用于單向和雙向綁定。了解它們的異同對于有效地使用 Vue 非常重要。