Vue.js — 表单输入绑定
1.表单输入绑定
你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。
1.1 文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<!-- 文本 -->
<input v-model="message1" placeholder="编辑...">
<p>单行文本：{{ message1 }}</p>
<!-- 多行文本 -->
<textarea v-model="message2" placeholder="编辑..."></textarea>
<p >多行文本：{{ message2 }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message1: '',
message2: ''
}
})
</script>
</body>
</html>
1.2 复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<!-- 单个复选框 -->
<input type="checkbox" >
<label for="checkbox">{{ checked }}</label>
<br/><br/>
<!-- 多个复选框 -->
<input type="checkbox" >
<label for="jack">Jack</label>
<input type="checkbox" >
<label for="john">John</label>
<input type="checkbox" >
<label for="mike">Mike</label>
<br/><br/>
<span>选中的名字：{{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: true,
checkedNames: []
}
})
</script>
</body>
</html>
1.3 单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<input type="radio" >
<label for="one">One</label>
<input type="radio" >
<label for="two">Two</label>
<br>
<div >选中的：{{ picked }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
</html>
1.4 选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择的：{{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>选择的：{{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{text: 'One', value: 'A'},
{text: 'Two', value: 'B'},
{text: 'Three', value: 'C'},
]
}
})
</script>
</body>
</html>
1.5 值绑定
对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）。
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<!-- `toggle` 为 true 时选中，`toggle` 为 false 时未选中 -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
<!-- 复选框 -->
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
<script>
// ...
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
</script>
1.6 修饰符
.lazy.number.trim
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<input v-model.lazy="message1" placeholder="编辑...">
<p>单行文本：{{ message1 }}</p>
<input v-model.number="age" type="number">
<p>{{ typeof age }}</p>
<input v-model.trim="msg">
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message1: '',
age: 0,
msg: ''
}
})
</script>
</body>
</html>
.lazy修饰符将input事件转变为change事件；.number修饰符将用户输入的值转为数值类型；.trim修饰符过滤用户输入的首尾空白字符。
参考：