title: VUE官方文档学习—表单输入绑定
date: 2021-6-3 14:44:57
author: Xilong88
tags: Vue
v-model
用来绑定表单的,本质是一种语法糖,有几点需要注意:
1.绑定时的数据来源是vm中的data,而不是默认的DOM属性
2.不同的输入元素v-model会使用不同的property,发生不同的事件
text 和 textarea 元素使用 value property 和 input 事件;
checkbox 和 radio 使用 checked property 和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
在输入法组合文字,也就是拼的过程,并不会输入,而是最后选择了文字后才会输入,如果想拼写过程也输入,必须使用input事件。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
在这里,message是绑定在data里的message的,这是双向的绑定。
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
多行文本和单行文本一样是绑定的value,在vm中是绑定在message上的。
文本区域插值,只有在没有用v-model的情况下才有用,假如两者同时存在,插值会被v-model替代。
单独插值还是双向绑定的,但是这样容易被xss攻击。
复选框
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
也就是,checked是绑定的布尔值,点击切换true和false,这里假如为其他值,转化后为true的会被当成true,但是值还是原本值,点击后会被切换成false;转化后为false的也是一样。
多个复选框,绑定到同一个数组:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
多选的表单绑定在一个数组上,也是在data里面。
假如数组原本有元素,不会被影响,也就是相当于选择就是把元素从数组中添加删除
单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
单选input绑定了一个字符串,里面的值可以和选项不相等,相等的时候对应value的选项会被选择。
这里的value是指的标签的属性,而不是标签的text。
选择框
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
单选的值也是绑定在一个字符串上和input的单选一样。
假如初始值不能匹配任何值,那么select会被渲染为未选中状态,在ios系统这有bug,所以可以像上面那样提供一个不可选择的默认值。
这里value没提供的情况下,就是标签里面的text值。
多选时 (绑定到一个数组):
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
多选时绑定到一个数组,和复选框一样,选项可以用v-for来渲染:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
值绑定
选项的value可以不是一个静态的值,可以通过v-bind来绑定到一个property上。
复选框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
这里true-value 和 false-value attribute 并不会影响输入控件的 value attribute,但是会影响toggle
单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a
选择框的选项
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123
修饰符
.lazy
这个修饰符会让input标签只在发生change事件后进行同步。
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
.number
这个修饰符可以把用户输入的内容转换为number类型,假如parseFloat不能解析,则返回原始值。
<input v-model.number="age" type="number">
在这里,输入不能被解析的内容是不改变age的。
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg">
在组件上使用 v-model
自定义输入组件可以和v-model一起使用,参考点击这里