目錄

1.input

1）type = text（文本框）

2）type = checkbox 復(fù)選框

3）type = radio 單選框

2.textarea

3.select

4.v-model的修飾符

1）.lazy

2）.number

3）.trim

---

小桃回來啦，忙一些別的事情，可有一段時間沒有學(xué)習(xí)前端了，還是接著之前的內(nèi)容寫vue的指令，v-model是語法糖，可以在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定，當(dāng)數(shù)據(jù)更新時對應(yīng)元素更新，元素更新時對應(yīng)數(shù)據(jù)更新。

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'} })

【結(jié)果】可以看到表單元素更新時，數(shù)據(jù)message也同時更新了

2）type = checkbox 復(fù)選框

單個復(fù)選框，綁定布爾值，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} })

【結(jié)果】

多個復(fù)選框，這種情況是將 v-mode l與一數(shù)組綁定，數(shù)組中的值為被選中的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: []} })

【結(jié)果】

3）type = radio 單選框

被綁定的數(shù)據(jù)和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: ''} })

【結(jié)果】

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: ''} })

【結(jié)果】

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: '請選擇'} })

【結(jié)果】

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

多選：綁定一個數(shù)組

<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: []} })

【結(jié)果】

4.v-model的修飾符

1）.lazy

在默認(rèn)情況下，v-model在每次input事件觸發(fā)后，將輸入框的值與數(shù)據(jù)進(jìn)行同步。如果要變?yōu)槭褂胏hange事件同步可以添加lazy修飾符

2）.number

自動將用戶的輸入值轉(zhuǎn)換為數(shù)值類型

3）.trim

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。