VUE官方文档学习---表单输入绑定
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一起使用，参考点击这里