目錄

1.input

1）type = text（文本框）

2）type = checkbox 復選框

3）type = radio 單選框

2.textarea

3.select

4.v-model的修飾符

1）.lazy

2）.number

3）.trim

---

小桃回來啦，忙一些別的事情，可有一段時間沒有學習前端了，還是接著之前的內容寫vue的指令，v-model是語法糖，可以在表單元素上創建雙向數據綁定，當數據更新時對應元素更新，元素更新時對應數據更新。

1.input

1）type = text（文本框）

<div id="app"><input v-model="message"><p>Message為：{{ message }}</p> </div> const vm = new Vue({el: '#app',data: {message: 'JWH'} })

【結果】可以看到表單元素更新時，數據message也同時更新了

2）type = checkbox 復選框

單個復選框，綁定布爾值，v-model="Boolean"

<div id="app"><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label> </div> const vm = new Vue({el: '#app',data: {checked: true} })

【結果】

多個復選框，這種情況是將 v-mode l與一數組綁定，數組中的值為被選中的input框的value值

<div id="app"><input type="checkbox" name="" id="zhang" value="張愛玲" v-model="checkedNames"><label for="zhang">張愛玲</label><input type="checkbox" name="" id="yang" value="楊絳 v-model="checkedNames"><label for="zhang">楊絳</label><input type="checkbox" name="" id="qian" value="錢鐘書" v-model="checkedNames"><label for="zhang">錢鐘書</label><br><span>被選中的人放在checkedNames中，有：{{ checkedNames }}</span> </div> const vm = new Vue({el: '#app',data: {checkedNames: []} })

【結果】

3）type = radio 單選框

被綁定的數據和value同步

<div id="app"><input type="radio" name="" id="zhang" value="張愛玲" v-model="picked"><label for="zhang">張愛玲</label><input type="radio" name="" id="yang" value="楊絳" v-model="picked"><label for="zhang">楊絳</label><input type="radio" name="" id="qian" value="錢鐘書" v-model="picked"><label for="zhang">錢鐘書</label><br><span>被選中的人放在checkNames中，有：{{ picked }}</span> </div> const vm = new Vue({el: '#app',data: {picked: ''} })

【結果】

2.textarea

<div id="app"><p>多行文本為：{{ message }}</p><textarea v-model="message" cols="85" rows="5"></textarea> </div> const vm = new Vue({el: '#app',data: {message: ''} })

【結果】

3.select

單選，匹配的值為option中的漢字

<div id="app"><select v-model="selected"><option>張愛玲</option><option>楊絳</option><option>錢鐘書</option></select><span>選擇：{{ selected==='請選擇'?'':selected }}</span> </div> const vm = new Vue({el: '#app',data: {selected: '請選擇'} })

【結果】

【注】如果v-model表達式的初始值未能匹配任何選項，<select>元素將被渲染為“未選中”狀態。在ios中，這會使用戶無法選擇第一個選項。因為這種情況下，ios不會觸發change事件，因此可以提供一個值為空的禁用選項

多選：綁定一個數組

<div id="app"><select v-model="selected" multiple><option>A</option><option>B</option><option>C</option></select><span>選擇：{{ selected }}</span> </div> const vm = new Vue({el: '#app',data: {selected: []} })

【結果】

4.v-model的修飾符

1）.lazy

在默認情況下，v-model在每次input事件觸發后，將輸入框的值與數據進行同步。如果要變為使用change事件同步可以添加lazy修飾符

2）.number

自動將用戶的輸入值轉換為數值類型

3）.trim

自動過濾用戶輸入的首尾空白字符

總結

以上是生活随笔為你收集整理的Vue指令篇_v-model_数据双向绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

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