Vue 中的動態 model 綁定是指將數據綁定到表單的輸入元素上,以便在用戶輸入時響應式地更新數據。這種技術非常適合創建交互式用戶界面,因為它可以避免手動調用 DOM API 來實現輸入元素的更新。在 Vue 中,可以使用 v-model 指令來實現動態 model 綁定。這個指令可以綁定到多種表單元素上,包括 input、select 和 textarea。
您輸入的是:{{ message }}
在上面的代碼中,我們使用 v-model 指令將數據綁定到 input 元素上。這意味著當用戶輸入值時,該值會自動更新組件實例中的 message 數據。此外,我們還在組件中添加了一個 p 元素,用于顯示當前輸入框中的值。
此外,v-model 指令不僅可以用于單一的數據屬性,還可以用于數組和對象的屬性。例如,如果您需要綁定一個選中項集合,請使用 v-model 指令并將值設置為數組:
您選擇的城市是:
- {{ city }}
在上面的代碼中,我們使用 v-model 指令將數據綁定到了 select 元素上,并設置了 multiple 屬性以支持多選。此外,我們還添加了一個 ul 元素,并使用 v-for 指令將 selectedCities 數組中的數據渲染為 li 元素。這樣,當用戶選擇一個或多個城市時,selectedCities 數組會響應式地更新。
總之,Vue 中的 v-model 指令為動態 model 綁定提供了非常簡單且方便的方法。通過使用 v-model,您可以輕松地將用戶輸入和應用程序狀態相關聯,并實現響應式的更新。這樣,您可以構建出更加動態、交互式的用戶界面。
上一篇vue du