VUE 提供了 v--model 指令， 用于在 表單類 的元素上雙向綁定事件。
一、v--model 基本用法
1. input 和 textarea
v--model 可以用于 input 框，以及 textarea 多行文本框等。
<div id="app">
<input type="text" v-model="value">
{{value}}
<textarea name="" id="" cols="30" rows="10" v-model="message">我是初始化值</textarea>
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
value: '',
message: ''
}
})
</script>
注意： 所顯示的值只依賴于所綁定的數(shù)據(jù)，不再關(guān)心初始化時的插入的 value 值。
2. 單選按鈕
- 單個單選按鈕，直接用
v--bind綁定一個布爾值，用v--model則不可以。
<div id="app">
<input type="radio" v-bind:checked="oneradio">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
oneradio: true,
}
})
</script>
- 若多個單選框組合使用（用相同 name 實現(xiàn)多個單選框互斥），就需要
v--model來配合value使用，綁定選中的單選框的 value 值，此處所綁定的初始值可以隨意設(shè)置。
<div id="app">
<input type="radio" name="checks" value="小貓" v-model="checkname"> 小貓
<input type="radio" name="checks" value="小狗" v-model="checkname"> 小狗
<input type="radio" name="checks" value="小刺猬" v-model="checkname"> 小刺猬
現(xiàn)在選中的是：{{checkname}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
checkname: '小貓' // 初始值
}
})
</script>
3. 復(fù)選框
- 單個復(fù)選框，直接綁定一個布爾值，可以用
v--model或v--bind。 - 多個復(fù)選框
（1）若組合使用，需要v--model配合value使用，v--model綁定一個數(shù)組；
（2）若綁定的是字符串，則會轉(zhuǎn)化為true和false，與所有綁定的復(fù)選框的checked屬性相對應(yīng)。
<div id="app">
單個復(fù)選框---v-bind：<input type="checkbox" v-bind:checked="onecheck"> <br>
單個復(fù)選框---v-model：<input type="checkbox" v-model="onecheckbox"> <br>
多個復(fù)選框：
<input type="checkbox" value="香蕉" v-model="checks"> 香蕉
<input type="checkbox" value="蘋果" v-model="checks"> 蘋果
<input type="checkbox" value="桃子" v-model="checks"> 桃子
現(xiàn)在選中了：{{checks}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
onecheck: true,
onecheckbox: true,
cheks: []
}
})
</script>
4. 下拉框
- 單選的下拉框，所綁定的
value初始化值可以為字符串，也可以為數(shù)組；若有value會直接優(yōu)先匹配一個value值，沒有value則匹配一個text值。 - 多選的下拉框，需要
v--model配合value來使用，v--model綁定一個數(shù)組，與復(fù)選框類似。
注意：v--model一定是綁定在select標(biāo)簽上。
<div id="app">
單選下拉框：
<select v-model="selected">
<option value="小貓">小貓</option>
<option value="小狗">小狗</option>
<option value="小刺猬">小刺猬</option>
</select>
現(xiàn)在選中的是 {{selected}}
<br><br><br><br>
多選下拉框（按Ctrl鍵點選）：
<select v-model="selectedmul" multiple>
<option value="小貓">小貓</option>
<option value="小狗">小狗</option>
<option value="小刺猬">小刺猬</option>
</select>
現(xiàn)在選中的是 {{selectedmul}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected: '',
selectedmul: []
}
})
</script>
5. 總結(jié)
- 如果是單選，初始化最好給定字符串，因為
v--model此時綁定的是靜態(tài)字符串或者布爾值。 - 如果是多選，初始化最好給定一個數(shù)組。
二、綁定值
1. 單選按鈕
只需要用 v--bind 給單個單選框綁定一個 value 值，此時 v--model 綁定的就是它的 value 值。
<div id="app">
<input type="radio" v-model="picked" v-bind:value="value"> ----{{picked}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
picked: true,
value: '111',
}
})
</script>
上例中，起初 v-model 并沒有生效；手動選中單選框后，v--model 綁定的 picked 會被替換成 value 的值。
2. 復(fù)選框
動態(tài)控制，使復(fù)選框選中和未選中時的 value 不同：復(fù)選框選中時取的是 true-value 的值，未選中時取的是 false-value 的值。
<div id="app">
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
{{toggle}}
被選中：{{toggle == value1}}
未被選中：{{toggle == value2}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
toggle: true,
value1: '我被選中了',
value2: '我未被選中'
}
})
</script>
3. 下拉框
在 select 標(biāo)簽上綁定 value 值對 option 并沒有影響。
<div id="app">
綁定在select上：
<select v-model="valueselect1" :value="{num:111}">
<option value="小貓">小貓</option>
</select>
現(xiàn)在選中的是 {{typeof valueselect1}} --- {{valueselect1}} <br>
綁定在option上：
<select v-model="valueselect2">
<option value="小貓" :value="{num:111}">小貓</option>
</select>
現(xiàn)在選中的是 {{typeof valueselect2}} --- {{valueselect2}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
valueselect1: '',
valueselect2: ''
}
})
</script>
三、修飾符
-
lazy
v--model默認(rèn)是在 input 輸入時實時同步輸入框的數(shù)據(jù)，而.lazy修飾符可以使其在失去焦點或敲回車鍵之后再更新。 -
number
將輸入的字符串轉(zhuǎn)化為number類型。 -
trim
trim會自動過濾輸入過程中首尾輸入的空格。
<div id="app">
1. lazy
<input type="text" v-model="inputStr1"> --- {{inputStr1}} <br>
<input type="text" v-model.lazy="lazyStr"> --- {{lazyStr}} <br>
2. number <br>
<input type="text" v-model.number="inputStr2"> --- {{typeof inputStr2}} <br>
<input type="text" v-model.number="isNum"> --- {{typeof isNum}} <br>
3. trim <br>
<input type="text" v-model="inputStr3"> length: {{inputStr3.split('').length}} <br>
<input type="text" v-model.trim="trimStr"> length: {{trimStr.split('').length}} <br>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
inputStr1: '',
lazyStr: '',
inputStr2: '',
isNum: '',
inputStr3: '',
trimStr: ''
}
})
</script>
