在 vue.js 中,v-bind 和 v-model 用于綁定 html 元素屬性和數據。v-bind 單向綁定,僅從 vue 實例向 html 元素傳遞數據,而 v-model 雙向綁定,可以在 vue 實例和 html 元素之間相互傳遞數據。
Vue 中 v-bind 和 v-model 的區別
在 Vue.js 中,v-bind 和 v-model 是兩個不同的指令,用于綁定 HTML 元素的屬性和數據。
v-bind
用途:用于動態綁定 HTML 元素的屬性值。
語法: v-bind:attribute-name="expression"
功能:會在元素被渲染時將表達式的值綁定到指定的屬性中。
v-model
用途:用于雙向綁定 HTML 元素的輸入值和 Vue 實例中的數據。
語法: v-model="data-property"
功能:會在元素被渲染時將 Vue 實例中的數據綁定到元素的 value 屬性,同時也會監聽元素的輸入事件,使其值的變化同步反映到 Vue 實例中。
區別
綁定方式:v-bind 單向綁定,僅從 Vue 實例向 HTML 元素傳遞數據。而 v-model 雙向綁定,可以在 Vue 實例和 HTML 元素之間相互傳遞數據。
默認屬性:v-bind 默認綁定 HTML 元素的屬性值。而 v-model 默認綁定元素的 value 屬性。
更新時序:v-bind 在 Vue 實例的數據改變時更新元素的屬性。而 v-model 在元素的輸入事件觸發時更新 Vue 實例的數據。
示例
使用 v-bind:
<code><button v-bind:disabled="loading">加載中</button></code>
登錄后復制
使用 v-model:
<code><input v-model="name"></code>
登錄后復制
結論
v-bind 和 v-model 是 Vue 中兩個重要的指令,分別用于單向和雙向綁定。了解它們的異同對于有效地使用 Vue 非常重要。