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>
注意： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的 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 实现多个单选框互斥），就需要
v-model来配合value使用，绑定选中的单选框的 value 值，此处所绑定的初始值可以随意设置。
<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"> 小刺猬
现在选中的是：{{checkname}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
checkname: '小猫' // 初始值
}
})
</script>
3. 复选框
- 单个复选框，直接绑定一个布尔值，可以用
v-model或v-bind。 - 多个复选框
（1）若组合使用，需要v-model配合value使用，v-model绑定一个数组；
（2）若绑定的是字符串，则会转化为true和false，与所有绑定的复选框的checked属性相对应。
<div id="app">
单个复选框---v-bind：<input type="checkbox" v-bind:checked="onecheck"> <br>
单个复选框---v-model：<input type="checkbox" v-model="onecheckbox"> <br>
多个复选框：
<input type="checkbox" value="香蕉" v-model="checks"> 香蕉
<input type="checkbox" value="苹果" v-model="checks"> 苹果
<input type="checkbox" value="桃子" v-model="checks"> 桃子
现在选中了：{{checks}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
onecheck: true,
onecheckbox: true,
cheks: []
}
})
</script>
4. 下拉框
- 单选的下拉框，所绑定的
value初始化值可以为字符串，也可以为数组；若有value会直接优先匹配一个value值，没有value则匹配一个text值。 - 多选的下拉框，需要
v-model配合value来使用，v-model绑定一个数组，与复选框类似。
注意：v-model一定是绑定在select标签上。
<div id="app">
单选下拉框：
<select v-model="selected">
<option value="小猫">小猫</option>
<option value="小狗">小狗</option>
<option value="小刺猬">小刺猬</option>
</select>
现在选中的是 {{selected}}
<br><br><br><br>
多选下拉框（按Ctrl键点选）：
<select v-model="selectedmul" multiple>
<option value="小猫">小猫</option>
<option value="小狗">小狗</option>
<option value="小刺猬">小刺猬</option>
</select>
现在选中的是 {{selectedmul}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selected: '',
selectedmul: []
}
})
</script>
5. 总结
- 如果是单选，初始化最好给定字符串，因为
v-model此时绑定的是静态字符串或者布尔值。 - 如果是多选，初始化最好给定一个数组。
二、绑定值
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. 复选框
动态控制，使复选框选中和未选中时的 value 不同：复选框选中时取的是 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 标签上绑定 value 值对 option 并没有影响。
<div id="app">
绑定在select上：
<select v-model="valueselect1" :value="{num:111}">
<option value="小猫">小猫</option>
</select>
现在选中的是 {{typeof valueselect1}} --- {{valueselect1}} <br>
绑定在option上：
<select v-model="valueselect2">
<option value="小猫" :value="{num:111}">小猫</option>
</select>
现在选中的是 {{typeof valueselect2}} --- {{valueselect2}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
valueselect1: '',
valueselect2: ''
}
})
</script>
三、修饰符
-
lazy
v-model默认是在 input 输入时实时同步输入框的数据，而.lazy修饰符可以使其在失去焦点或敲回车键之后再更新。 -
number
将输入的字符串转化为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>
