1. 程式人生 > >Vue v-model的深入理解

Vue v-model的深入理解

v-model:主要是針對表單來使用的

基礎用法

你可以用v-model 指令在表單 <input><textarea><select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇,但 v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料,並對一些極端場景進行一些特殊處理。

v-model會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data 選項中宣告初始值。

對於需要使用輸入法 (如中文、日文、韓文等) 的語言,你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程,請使用 input 事件。

內涵用法

<input v-model="demo" />
<input v-bind:value="demo" v-on:input="demo= $event.target.value" />

以上的程式碼中,第一行的程式碼只是第二行的程式碼的語法糖。
第二行程式碼中將value值繫結到demo上,並監聽輸入動作,輸入改變時,將新的value值傳輸給demo。
第二行中的程式碼還可以簡寫成如下:

<input :value="demo"  @input="demo = $event.target.value" />

以上是在學習Vue過程中所學到的基礎性的東西,簡單記錄下來。