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一起使用，参考点击这里