Vue v-model的深入理解
阿新 • • 發佈:2019-01-03
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過程中所學到的基礎性的東西,簡單記錄下來。