https://www.jb51.net/article/142677.htm

vue中v-model的應用及使用詳解

更新時間：2018年06月27日 08:59:15 轉載作者：王子城 v-model用於表單資料的雙向繫結，其實它就是一個語法糖。這篇文章主要介紹了vue中v-model的應用,需要的朋友可以參考下

vue中經常使用到<input>和<textarea>這類表單元素，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>中資料隨之改變。

1 2 3 4 5 6 7 8 9 10 11 12 13

<div id="app"> <input v-model="test"> <!-- <input :value="test" @input="test= $event.target.value"> --><!--語法糖--> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { test: '這是一個測試' } }); </script>

1.v-model在input的下拉框、單選按鈕、複選框中的應用

如下面程式碼，分別是v-model在input不同的元件中的應用，但是大體用法相同。注意：像下面程式碼中複選框這樣需要接收多條資料的情況下，在data裡面應該由陣列與其對應二不是字串。

這裡有一個值繫結的問題，不管是下拉框或者單選按鈕還是複選框，我們都可以在對應的標籤內設定value。以下拉框為例，我們在<option>中添加了vulue=“A被選”，當我們選擇第一個下拉框A的時候，在selected中的字串為‘A被選'，如果我們不在<option>中設定value值的話那麼selected中的字串將是<option>中的值‘A'。

這裡還有一個和vue無關的問題，比較簡單，但是由於平時主要做後臺java開發沒太注意這個前端問題。以下面的單選按鈕程式碼為例，<label>標籤內有一個for元素與input中的id值對應(兩個值相同)，剛開始不太理解為什麼這麼寫，這個對前端人員來說應該是一個很簡單的問題。這樣寫的目的沒有其它任何作用，只是label元素為滑鼠改進了可用性，在點選label的時候也相當於點選了對應的input控制元件，點選label標籤也可以觸發input標籤控制元件。例如單選按鈕在加了for之後點選small也可以選擇對應按鈕，但是如果不加for是沒有任何反應的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<!--下拉框--> <div id="app"> <select v-model="selected"> <option value="A被選">A</option> <option value="B被選">B</option> <option value="C被選">C</option> </select> <span>Selected: {{ selected }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { selected: '' } }); </script> <!--單選按鈕--> <div id="app"> <input type="radio" id="small" value="small_value" v-model="picked"> <label for="small">small</label> <br> <input type="radio" id="big" value="big_value" v-model="picked"> <label for="big">big</label> <br> <span>Picked: {{ picked }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { picked: '' } }) </script> <!--複選框--> <div id="app"> <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames"> <label for="one">選項一</label> <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames"> <label for="two">選項二</label> <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames"> <label for="three">選項三</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> <script src="/resources/js/vue.js"></script> <script> new Vue({ el: '#app', data: { checkedNames: [] } }) </script>

2.v-model修飾符

v-model也可以和.lazy、.trim和.number這些修飾符一起使用。

1 2 3 4 5 6

<!-- 在每次 input 事件觸發後將輸入框的值與資料進行同步，新增 lazy 修飾符，從而轉變為使用 change 事件進行同步 --> <input v-model.lazy="msg" > <!--去除字串首尾的空格--> <input v-model.trim="msg"> <!--將資料轉化為值型別--> <input v-model.number="age" type="number">

.trim和.number的用法比較簡單，這裡就不做過多解釋。.lazy相當於一個延遲載入的過程。在上面我們講過<input v-model="test">相當於一個語法糖<input :value="test" @input="test = $event.target.value">，而<input v-model.lazy="msg" >則相當將input的實時更新改為一個change事件，v-model.lazy只有當焦點移除input時才會觸發事件。下圖1位v-model效果，圖2位v-model.lazy效果。

下面在單獨給大家介紹下vue中v-model使用

v-model用於表單資料的雙向繫結，其實它就是一個語法糖，這個背後就做了兩個操作：

  1. v-bind繫結一個value屬性

  2. v-on指令給當前元素繫結input事件

自定義元件使用v-model，應該有以下操作：

1. 接收一個value prop

2. 觸發input事件，並傳入新值

在原生表單元素中：

1	<input v-model="inputValue">

相當於

1	<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定義元件中

1	<my-component v-model="inputValue"></my-component>

相當於

1	<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

這個時候，inputValue接受的值就是input事件的回撥函式的第一個引數，所以在自定義元件中，要實現資料繫結，還需要$emit去觸發input的事件。

1	this.$emit('input', value)

總結

以上所述是小編給大家介紹的vue中v-model的應用及使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援！