示例：

<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

v-model?會忽略所有表單元素的初始值，會選擇 Vue 實例數據來作為具體的值。

多行文本： <p style="white-space: pre-line;">{{ message }}</p> <textarea v-model="message" placeholder="add multiple lines"></textarea>復選框： <div id='example-3'><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><span>Checked names: {{ checkedNames }}</span> </div> new Vue({el: '#example-3',data: {checkedNames: []} })單選按鈕： <div id="example-4"><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><span>Picked: {{ picked }}</span> </div> new Vue({el: '#example-4',data: {picked: ''} })選擇列表： <div id="example-5"><select v-model="selected">//列表選擇后即選定關閉列表<select v-model="selected" multiple>//列表選擇后不關閉列表可繼續選擇<option disabled value="">請選擇</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span> </div> new Vue({el: '...',data: {selected: ''//選擇結果保存為一個字符串selected: []//選擇結果存為一個數組 } })

值綁定：綁定 value 到 Vue 實例的一個動態屬性上，這時可以用?v-bind?實現

復選框： <inputtype="checkbox"v-model="toggle"v-bind:true-value="a"v-bind:false-value="b" > // 當選中時 vm.toggle === vm.a // 當沒有選中時 vm.toggle === vm.b 單選按鈕： <input type="radio" v-model="pick" v-bind:value="a"> // 當選中時 vm.pick === vm.a 選擇列表的選項： <select v-model="selected"><option v-bind:value="{ number: 123 }">123</option> </select> // 當選中時 typeof vm.selected // => 'object' vm.selected.number // => 123

修飾符：

.lazy <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >.number //將用戶的輸入值轉為 Number 類型 <input v-model.number="age" type="number">.trim //自動過濾用戶輸入的首尾空格 <input v-model.trim="msg">

?

轉載于:https://www.cnblogs.com/avidya/p/7606935.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue-7-表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。