Vue是目前最受歡迎的前端框架之一,它具有典型的MVC(Model-View-Controller)架構,方便整合資料和視圖。在Vue 3中,v-model函數作為雙向資料綁定的核心扮演著重要的角色。本文將會討論這個函數在Vue應用的常見應用。
<div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div>
var app = new Vue({ el: '#app', data: { message: '' } })
這個模型提供一個單行文字方塊和一個段落元件,當輸入文字方塊時,段落元件即時地展示所輸入的值。這種實作方式既方便又直觀,無需使用方式和Vue1和Vue2中的模板語法類似。由此可見,v-model函數在Vue 3中更簡單易用。
<div id="app"> <input type="password" v-model.trim="password"> <input type="password" v-model.trim="confirmpassword"> <button @click="submit">Submit</button> </div>
在這個例子中,v-model函數修飾符trim去除了使用者可能的無關字元輸入。使用v-model函數修飾符還可以檢查使用者的輸入是否符合規則,例如限制輸入字元數量、限制輸入字元種類等等。
<custom-input v-model="inputValue"></custom-input>
Vue.component('custom-input', { props: ['modelValue'], template: ` <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > ` })
在這個自訂元件中,搭配v-model函數的標準用法,prop傳入了modelValue屬性,輸入框將會自動更新modelValue的值。
以上是Vue3中的v-model函數:雙向資料綁定的應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!