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>中數據隨之改變。

<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是沒有任何反應的。

<!--下拉框-->
<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這些修飾符一塊兒使用。

<!-- 在每次 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使用

下面在單獨給你們介紹下vue中v-model使用

v-model用於表單數據的雙向綁定，其實它就是一個語法糖，這個背後就作了兩個操做：

  1. v-bind綁定一個value屬性

  2. v-on指令給當前元素綁定input事件

自定義組件使用v-model，應該有如下操做：

1. 接收一個value prop

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

在原生表單元素中：

<input v-model="inputValue">
至關於

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
在自定義組件中

<my-component v-model="inputValue"></my-component>
至關於

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
這個時候，inputValue接受的值就是input事件的回調函數的第一個參數，因此在自定義組件中，要實現數據綁定，還須要$emit去觸發input的事件。

this.$emit('input', value)

總結

此博客只是爲了記憶相關知識點，大部分爲網絡上的文章，在此向各個文章的做者表示感謝！

本文引自：

https://www.cnblogs.com/mark5/p/11603428.html