僅用于以下控件：

<input> <select> <textarea> 組件

v-model以Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源，應(yīng)當(dāng)在組件的 data 選項(xiàng)中聲明初始值，之后通過監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。

在表單控件上使用v-model

v-model根據(jù)不同的控件類型，使用不同的屬性作為輸入并拋出不同的事件：
text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio ，單個(gè)選項(xiàng)使用checked屬性，多個(gè)選項(xiàng)，輸出value屬性的數(shù)組，事件使用 change
select 字段將 value 作為 prop 并將 change 作為事件。
1、text 和 textarea 元素綁定value 屬性和 input 事件：

<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

監(jiān)聽用戶的輸入，并將value的值給message，所以，當(dāng)用戶有輸入時(shí)，p標(biāo)簽里的{{ message }}會(huì)實(shí)時(shí)顯示用戶的輸入
注意，在<textarea></textarea>中使用插值不會(huì)生效，而是給它綁定v-model，在另外的地方輸出對(duì)應(yīng)的value。
2、checkbox 復(fù)選框：單個(gè)選項(xiàng)綁定checked屬性，多個(gè)選項(xiàng)綁定value屬性到一個(gè)數(shù)組，事件為 change ：


3、radio單選按鈕：


4、select選擇框：
（1）只可單選時(shí)，綁定選項(xiàng)的value值


2）可多選時(shí)，綁定value到一個(gè)數(shù)組

5、在組件上使用v-moel

組件上的 v-model 默認(rèn)使用名為 value 的 prop 和名為 input 的事件。

組件的input事件通過組件內(nèi)部輸入框的input事件提交$emit，手動(dòng)觸發(fā)。

所以為了保持組件內(nèi)input的value和input和組件的保持一致，組件內(nèi)的 必須：

• value 使用作為prop 的value
• input 綁定到組件的input事件

<custom-input v-model="searchText"></custom-input> //相當(dāng)于 <custom-input:value="searchText"@input="searchText = $event" ></custom-input>//對(duì)應(yīng)的input Vue.component('custom-input', {props: ['value'],template: `<input:value="value"@input="$emit('input', $event.target.value)">` })

以上是v-model的默認(rèn)操作，但是像復(fù)選框用作單個(gè)選項(xiàng)這種使用checked屬性而不是value屬性，可以用實(shí)例的model 選項(xiàng)重新定義默認(rèn)的prop和事件：

Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox":checked="checked":change="$emit('change', $event.target.checked)">` })

v-model修飾符

在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：
<!-- 在“change”時(shí)而非“input”時(shí)更新 --> <input v-model.lazy="msg" >

.number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符：<input v-model.number="age" type="number">

.trim

如果要自動(dòng)過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：<input v-model.trim="msg">

轉(zhuǎn)載于
https://www.cnblogs.com/yaoyao-sun/p/10542612.html

總結(jié)

以上是生活随笔為你收集整理的v-model的用法与解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。