vue之v-model
上一篇文章總結了v-bind的用法，我們發現v-bind實現了數據的單向綁定，將vue實例中的數據同元素屬性值進行綁定，今天我們將總結vue中的數據雙向綁定v-model。
v-model實現雙向綁定主要是通過v-bind綁定一個value屬性 ，然後再使用v-on指令給當前元素綁定input事件，下面我們主要總結一下創建的使用方法。
基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title><script src="./vue.js"></script> </head> <body> <div id="demo"> <input v-model="message"> <p>{{message}}</p> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ message:"hello", }, }) </script> </body> </html>
初始化的時候，我們為message賦值為hello時，input框和p標簽中顯示的也是該值，隨後當我們改變input的value值，p標簽中的值隨之改變。
v-model.lazy
在上面的例子中，當我們改變input框的value時，p標簽的內容立即隨之改變，也就是說，在默認情況下， v-model在input事件中同步輸入框的值與數據，但可以添加一個修飾符 lazy ，從而轉變為在input框失去焦點的時候同步(鼠標移出輸入框時，才同步數據)。
<div id="demo"> <input v-model.lazy="mess2" /> <p>mess2 is :{{mess2}}</p> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ mess2:‘hello‘, }, }) </script>
在上面的例子中，因為我們在v-model後面添加了lazy，改變了數據的同步，所以在我們改變輸入框中的值的時候，下面input框的值並沒有直接改變，而是在鼠標移開後才發生數據同步的。
v-model.number
在input中，有一種type="number"的input，但是在html中，該類型的input中輸入的number類型數據最後也會被輸出為字符串類型。
<div id="demo"> <div> type="number"輸入框<input v-model="num1" type="number" /><span>{{type1}}<span> </div> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ num1:2, }, computed:{ type1(){ return typeof(this.num1) }, } }) </script>
初始化的時候，獲取的是綁定的值，為number類型，但是當input框的value值發生變化時，類型就變為了字符串類型，此時，我們可以添加一個修飾符number給v-model來處理輸入值，這樣我們就可以獲得number類型的數值了。
<div id="demo"> <div> number修飾符輸入<input v-model.number="num2" type="number" /><span>{{type2}}<span> </div> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ num2:‘‘ }, computed:{ type2(){ return typeof(this.num2) } } }) </script>
v-model.trim
在input框中，對用戶的輸入進行限制是十分重要的，其中最常見的就是去空格了，在vue中，如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入，需要註意的是，該方法只能去除首尾的空格，不能去除中間的空格。
<div id="demo"> <input v-model.trim="mess3"> <p>mess3 is :{{ mess3 }}</p> </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ mess3:‘‘ }, }) </script>
單選框和計算屬性使用
<div id="demo"> <input type="text" v-model="a" number> 這個數字加一的結果是{{b}}<br> <input type="radio" name="sex" v-model="sex" value="男">男 <input type="radio" name="sex" v-model="sex" value="女">女 你的性別是{{sex}} </div> <script> var demo = new Vue({ el:‘#demo‘, data:{ a:"", sex:‘‘, }, computed:{ b:function(){ return this.a +1; } } }) </script>
vue之v-model