1. 基础用法
使用 v-model
对表单元素创建双向数据绑定,表单元素包括 input
、textarea
和 select
。
需要注意的是,v-model
会忽略所有表单元素的初始 attribute 值,因此在 Vue 实例中需要声明初始值。
v-model
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
# 文本
v-model
将 input 标签的 value 与 content 绑定在一起:
<div id="app">
<input v-model="content" placeholder="edit me">
<p>content: {{content}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
content: ''
}
})
</script>
let vm = new Vue({
el: "#app",
data: {
content: ''
}
})
# 复选框
将多个复选框中被 checked
的元素的 value
绑定到同一个数组:
<div id="app">
<input type="checkbox" id="a" value="A" v-model="checkedItems">
<label for="a">A</label>
<input type="checkbox" id="b" value="B" v-model="checkedItems">
<label for="b">B</label>
<input type="checkbox" id="c" value="C" v-model="checkedItems">
<label for="c">C</label>
<p>cheked items are: {{checkedItems}}</p>
</div>
let vm = new Vue({
el: "#app",
data: {
checkedItems: []
}
})
# 单选按钮
将单选按钮中被 checked
的元素的 value
绑定到变量:
<div id="app">
<input type="radio" id="b" value="boy" v-model="picked"> boy
<input type="radio" id="g" value="girl" v-model="picked"> girl
<br>
<p>{{picked}} is picked.</p>
</div>
let vm = new Vue({
el: "#app",
data: {
picked: ''
}
})
# 下拉选择框
v-model
将被选择的元素的 value 绑定到变量或数组:
<div id="app">
<select v-model="selected"
style="width: 60px;">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>{{selected}}</p>
</div>
let vm = new Vue({
el: "#app",
data: {
selected: ''
}
})
注意:在 select
元素内设置 multiple
属性可以多选,此时需要用数组接收被选元素的 value !
动态渲染选项:
将选项存储在 data:
let vm = new Vue({
el: "#app",
data: {
selected: [],
options: [
{text: "A", value: 'A'},
{text: "B", value: 'B'},
{text: "C", value: 'C'}
]
}
})
使用 v-for
动态渲染 options:
<div id="app">
<select v-model="selected" multiple
style="width: 60px;">
<option
v-for="(item, index) of options"
:key="index"
v-bind:value="item.value"
>{{item.text}}</option>
</select>
<p>{{selected}}</p>
</div>
2. 修饰符
# .number
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符:
<input v-model.number="age" type="number">
# .trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<input v-model.trim="content" placeholder="edit me">
参考: Vue