v-model實現雙向綁定

##v-model指令,能夠在input和testarea元素上實現雙向綁定.

你們都知道v-model能夠實現雙向綁定,可是否想過它的本質?

其實本質上的v-model不過是監聽用戶的input事件來更新數據,以及對一些狀況作特殊管理.而數據的來源即是vue實例中的data.

 

##單行文本

html:
<div id="modelOne">
<input v-model="message" placeholder="編輯">
<p>message 是：{{ message }}</p>

js:
new Vue({
 el:"#modelOne",
 data:{
 message:'';
 }
})

便可實現簡單的雙向綁定

##多行文本 js文件與單行文本類似
html:
<span> 多行文本:</span>
<p style="white-space:pre-line;">{{message}}</p>
<br>
<textarea v-model="message" placeholder="add more line"></textarea>

 

 ##checkbox

html:
<div id='example-3'>
 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="john" value="John" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
 <label for="mike">Mike</label>
 <br>
 <span>勾選的名字是：{{ checkedNames }}</span>
</div>

js:

new Vue({
 el: '#example-3',
 data: {
 checkedNames: [] //當存在多個對象時,記得用數組
 }
})

#radio js部分和check的相同

html:

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>選中的是：{{ picked }}</span>

#select
多選數組 js部分定義爲數組

html部分:

<select v-model="selected" multiple>
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
<br>
<span>選中的是：{{ selected }}</span>

效果類似:v-for去渲染動態的option能夠實現相同的效果

與value屬性綁定

對於 radio, checkbox 和 select 的 option 選項，一般能夠將  與值是靜態字符串的 value 屬性關聯在一塊兒
（或者，在 checkbox 中，綁定到布爾值）：
v-model

<!-- 當選中時，`picked` 的值是字符串 "a"（譯者注：若是沒有 value 屬性，選中時值是 null） -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 的值是 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當選中第一個選項時，`selected` 的值是字符串 "abc"
（譯者注：若是沒有 value 屬性，選中時 selected 值是 option 元素內的文本） -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>


與value屬性綁定


###checkbox

<input

 type="checkbox"
 v-model="toggle"
 true-value="yes"
 false-value="no"
>

////選中時:
vm.toggle === 'yes'
///沒有選中時
vm.toggle === 'no'

修飾符(modifiers)

.lazy

默認狀況下，v-model 會在每次 input 事件觸發以後，將數據同步至 input 元素中（除了上述提到的輸入法組合文字時不會）。能夠添加 lazy 修飾符，從而轉爲在觸發 change 事件後同步：

.number

若是想要將用戶的輸入，自動轉換爲 Number 類型（譯註：若是轉換結果爲 NaN 則返回字符串類型的輸入值），能夠在 v-model 以後添加一個 number 修飾符，來處理輸入值：

這一般頗有用，由於即便是在 type="number" 時，HTML 中 input 元素也老是返回一個字符串類型的值。

.trim

若是想要將用戶的輸入，自動過濾掉首尾空格，能夠在 v-model 以後添加一個 trim 修飾符，來處理輸入值：