vue.js中的v-model指令的深刻理解
生活随笔
收集整理的這篇文章主要介紹了
vue.js中的v-model指令的深刻理解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue中經常使用到和這類表單元素，vue對于這些元素的數據綁定和我們以前經常用的jQuery有些區別。vue使用v-model實現這些標簽數據的雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。
v-model本質上是一個語法糖。如下代碼<input v-model="test">本質上是<input :value="test" @input="test = $event.target.value">，其中@input是對<input>輸入事件的一個監聽:value="test"是將監聽事件中的數據放入到input，下面代碼是v-model的一個簡單的例子。在這邊需要強調一點，v-model不僅可以給input賦值還可以獲取input中的數據，而且數據的獲取是實時的，因為語法糖中是用@input對輸入框進行監聽的。可以在如下div中加入<p>{{ test}}</p>獲取input數據，然后去修改input中數據會發現<p></p>中數據隨之改變。 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script> </head><body><!-- v-bind:屬性='變量' 不要{}v-model='變量';更多的是用在輸入框之類的地方；輸入框可以接受后臺(.net/java)都可以給它傳值；同樣輸入框也可以向后臺傳遞值；這種情況就是雙向綁定。--><div id="app"><input type="text" placeholder="請輸入郵箱" v-model="msg"><input type="radio" value="male" v-model="gender">男<input type="radio" value="female" v-model="gender">女<input type="checkbox" v-model="answer" value="A" />A<input type="checkbox" v-model="answer" value="B" />B<input type="checkbox" v-model="answer" value="C" />C<hr><select v-model="edu" multiple><!--multiple:可以多選--><option value="博士">博士研究生</option><option value="碩士">碩士研究生</option><option value="本科">學士</option></select>郵箱：{{msg}},性別：{{gender}},選擇：{{answer}},{{answer.join('|')}},學歷：{{edu}}</div><script>let app = new Vue({el: "#app",data: {msg: 'pony.ma',gender: 'male',answer: [], //這里需要定義成數組edu: '本科'}});</script> </body></html>案例效果如下：
v-model也可以和.lazy、.trim和.number這些修飾符一起使用。
v-model的修飾符如下所示：
總結
以上是生活随笔為你收集整理的vue.js中的v-model指令的深刻理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 雷军博客1999：互联网创业的黄金年代,
- 下一篇： C# 连接MySQL错误给定关键字不在字