Vue-學習筆記-08 v-model詳解
文章目錄
1、v-model簡介
表單控件在實際開發中是很是常見的。特別是對於用戶信息的提交，須要大量的表單。
Vue中使用v-model指令來實現表單元素和數據的雙向綁定。javascript
預期：隨表單控件類型不一樣而不一樣。
限制：
<input>
<select>
<textarea>
componentsvue
2、v-model基本使用
<body> <div id='app'> <input type="text" v-model='message'> { {message}} </div> <script src='../js/vue.js'></script> <script> let vm = new Vue({ el:'#app', data:{ message:'test' }, }) </script> </body>
效果;
java
3、v-model的原理
v-model實際上是一個語法糖，它的背後本質上是包含兩個操做：web
- v-bind綁定一個value屬性
- v-on指令給當前元素綁定input事件
<body> <div id='app'> <!-- <input type="text" v-model="message"> --> <!-- 雙向數據綁定的原理其實是 兩個指令 綁定value和監聽輸入 --> <!-- <input type="text" :value="message" v-on:input="valueChange"> --> <input type="text" :value="message" @input="message = $event.target.value"> <h2>{ {message}}</h2> </div> <script src='../js/vue.js'></script> <script> let vm = new Vue({ el:'#app', data:{ message:'test' }, methods: { valueChange:function(event){ this.message = event.target.value } }, }) </script> </body>
同樣能夠實現一樣的效果。app
4、v-model 結合radio類型使用
知識點：svg
- 使用了
v-model事後能夠去掉 name屬性，同樣能夠起到互斥效果。 - 對雙向數據綁定的值設置默認值能夠設置默認選中，這裏個人默認值爲
Girl因此默認選中女。
<body> <div id='app'> <label> 男:<input type="radio" v-model="sex" value='Boy'> </label> <label> 女:<input type="radio" v-model="sex" value="Girl"> </label> <h2>您選擇的性別是：{ {sex}}</h2> </div> <script src='../js/vue.js'></script> <script> let vm = new Vue({ el:'#app', data:{ message:'test', sex:'Girl' }, }) </script> </body>
效果:
ui
5、v-model 結合checkbox類型使用
<body> <div id='app'> <!--複選框 --> <label> 籃球<input type="checkbox" v-model="hobbies" value="籃球"> </label> <label> 足球<input type="checkbox" v-model="hobbies" value="足球"> </label> <label> 乒乓球<input type="checkbox" v-model="hobbies" value="乒乓球"> </label> <label> 羽毛球<input type="checkbox" v-model="hobbies" value="羽毛球"> </label> <label> 橄欖球<input type="checkbox" v-model="hobbies" value="橄欖球"> </label> <h2>您的愛好是:{ {hobbies}}</h2> </div> <script src='../js/vue.js'></script> <script> let vm = new Vue({ el:'#app', data:{ hobbies:[] }, }) </script> </body>
效果：
怎麼樣，是否是至關的舒服？
this
6、v-model配合select使用
<body> <div id='app'> <!-- 1.選擇一個 --> <select v-model="fruit"> <option value="蘋果">蘋果</option> <option value="香蕉">香蕉</option> <option value="李子">李子</option> <option value="榴蓮">榴蓮</option> </select> <h2>您選擇的水果是:{ {fruit}}</h2> <!-- 2.選擇多個 --> <select v-model="fruits" name="test" multiple > <option value="蘋果">蘋果</option> <option value="香蕉">香蕉</option> <option value="李子">李子</option> <option value="榴蓮">榴蓮</option> </select> <h2>您選擇的水果是:{ {fruits}}</h2> <!-- 值綁定 值是動態去獲取的--> <label v-for="item in originHobbies"> { {item}}<input type="checkbox" v-model="hobbiesArr" :value='item'> </label> <h2>您的愛好是:{ {hobbiesArr}}</h2> </div> <script src='../js/vue.js'></script> <script> let vm = new Vue({ el:'#app', data:{ fruit:'香蕉', fruits:[], hobbiesArr:[], originHobbies:['籃球','足球','橄欖球','乒乓球','網球','羽毛球'] }, }) </script> </body>
效果;
是否是很簡單呢？spa
6、修飾符
6.1 .lazy(懶惰)修飾符：
默認狀況下，v-model默認是在input事件中同步輸入框的數據的。
也就是說，一旦有數據發生改變對應的data中的數據就會自動發生改變。3d
lazy修飾符可讓數據在失去焦點或者回車時纔會更新：
6.2 .number修飾符：
v-model默認給變量賦值的時候，都是string類型
默認狀況下，在輸入框中不管咱們輸入的是字母仍是數字，都會被當作字符串類型進行處理。
可是若是咱們但願處理的是數字類型，那麼最好直接將內容當作數字處理。
number修飾符可讓在輸入框中輸入的內容自動轉成數字類型：
6.3 .trim修飾符：
若是輸入的內容首尾有不少空格，一般咱們但願將其去除.
trim修飾符能夠過濾內容左右兩邊的空格
三個的實例代碼：
<body> <div id='app'> <!-- 1.lazy(懶惰) 修飾符 --> <!-- 敲回車或者失去焦點才觸發 --> <input type="text" v-model.lazy="message"> <h2>{ {message}}</h2> <!-- 2 .number 修飾符 --> <!-- 把輸入的數據轉化爲數值類型 --> <input type="number" v-model.number="age"> <h2>{ {typeof age}}</h2> <!-- 3 .trim 去除字符串左右兩邊的空格 --> <input type="text" v-model.trim="str"> <h2>您輸入的字符串是:{ {str}}</h2> </div> <script src='../js/vue.js'></script> <script> let vm = new Vue({ el:'#app', data:{ message:'test', age:0, str:'' }, }) </script> </body>
效果：