標籤：滑鼠 改變 類型 put 使用方法 9.png func head 字元
上一篇文章總結了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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
