Vue 提供了v-model指令， 用于双向绑定表单类元素上 view 与 view-model 的数据
基础用法
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
单行文本
<div id="app">
<input type="text" v-model="msg"><br>
你输入的是： {{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
多行文本
与单行文本类似:
<textarea name="" id="" cols="30" rows="4" v-model="msg">
我是多行文本的初始值
</textarea>
正如开头提到的，所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value
image.png
单选按钮
<div id="app">
<input type="radio" name="pets" value="cat" v-model="petName">猫猫 <br>
<input type="radio" name="pets" value="dog" v-model="petName">狗狗 <br>
现在选中的是： {{petName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
petName: ''
}
})
</script>
复选框
单个复选框
单个复选框，直接绑定到布尔值
<div id="app">
v-model: <input type="checkbox" v-model="checked"> {{ checked }} <br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
多个复选框
多个复选框，绑定到同一个数组：
<div id="app">
<input type="checkbox" value="cat" id="cat" v-model="arr">
<label for="cat">cat</label><br>
<input type="checkbox" value="dog" id="dog" v-model="arr">
<label for="dog">dog</label><br>
<input type="checkbox" value="bird" id="bird" v-model="arr">
<label for="bird">bird</label>
<br>
你选中了 ： {{ arr }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
arr: []
}
})
下拉框
单选下拉框
单选时， 初始化最好绑定到字符串
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<!-- vue建议提供一个值为空的禁用选项 -->
<option value="cat">猫猫</option>
<option value="dog">狗狗</option>
<option value="bird">小鸟</option>
</select>
<br> 你选中了 ： {{ selected }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
selected: '' //初始化最好给定字符串
}
})
</script>
多选下拉框
多选时，绑定一个数组
<div id="app">
<select v-model="selected" multiple>
<option disabled value="">请选择</option>
<!-- vue建议提供一个值为空的禁用选项 -->
<option value="cat">猫猫</option>
<option value="dog">狗狗</option>
<option value="bird">小鸟</option>
</select>
<br> 你选中了 ： {{ selected }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
值绑定
对于单选按钮，复选框及下拉框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
单选按钮
只需要用v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值
<div id="app">
<input type="radio" v-bind:value='msg' v-model="pick">单选框<br>
v-bind: {{ msg }} <br>
v-model: {{ pick }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'msg',
pick: 'pick'
}
})
</script>
// 当选中时 app.msg === app.pick
当选中时 app.msg === app.pick
复选框
true-value 当选中时
false-value 当没有被选中时
<div id="app">
<input type="checkbox"
v-model="toggle"
v-bind:true-value= "value1"
v-bind:false-value="value2">点击<br>
toggle当前的值： {{ toggle}} <br>
选中: {{ toggle === value1 }} <br>
未被选中: {{ toggle === value2 }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
toggle: 'toggle',
value1: '我被选中了~',
value2: '我没有被选中'
}
})
</script>
下拉框
<div id="app">
<select v-model="selected" >
<option v-bind:value="{a:1}">A</option>
</select>
当选中时，selected 的值为： {{selected}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
修饰符
.lazy
v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其使用 change 事件进行同步（在失去焦点或者敲回车键之后再更新）。
来个 demo 感受一下
.number
自动将用户的输入值转为数值类型
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
.trim
trim 自动过滤输入过程中首尾输入的空格
网友评论