【Vue】08_表单输入绑定

表单输入绑定

v-model

创建双向数据

• 它会根据控件类型自动选取正确的方法来更新元素。
• 本质上是语法糖。
  • 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

注意：

• 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
• 如果你也想处理这个过程，请使用 input 事件。

注意：以下例子的数据均在vue实例中给出，以下只给出核心代码

文本

model绑定的值和input的value绑定

<input v-model="message" placeholder="edit me" value="初始化会被忽略">
<p>Message is: {{ message }}</p>

多行文本

在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

• 没有value

<p>msg:{{msg2}}</p>
<textarea v-model="msg2"></textarea>

复选框

<input type="checkbox" v-model="msg3">
<label>{{ msg3 }}</label>

复选框合成一组

<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>

value：选中后显示的值

• 当绑定的值为数组时，则显示value的值（一组）
• 否则显示true或false（一个）

单选按钮

只要两个v-model绑定同一个值就是一组按钮

• 无需绑定name

label的for属性：表名这个label和那个组件一组

• 点击label后相当于单击了单选按钮，如果没绑定点击后什么事都没发生
• for绑定其他元素的id

<input type="radio"  id="one" value="One" v-model="picked"><label for="one">one</label>
<input type="radio"  id="two" value="Two" v-model="picked"><label for="two">two</label>

选择框

1. 单选

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。

在 iOS 中，这会使用户无法选择第一个选项。

• 因为这样的情况下，iOS 不会触发 change 事件。
• 因此，更推荐像上面这样提供一个值为空的禁用选项。

没为option绑定value时，value默认为text中的值

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

2. 多选

添加multiple属性

• 多选时按住ctrl键
• 绑定的值应改为数组类型

<select v-model="selected" multiple>

3. 用v-for渲染数据

<select v-model="selected">
    <option v-for="option in options" :value="option.id" :key="option.id">{{option.text}}</option>
</select>
<label>{{selected}}</label>

new Vue({
  // ...
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

值绑定

上面的例子中都有提及

更多详细内容

修饰符

.lazy

添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步

以下例子，在输入时不会同步输出，而是等敲回车后再同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
{{msg}}

.number

自动将用户的输入值转为数值类型

<input v-model.number="age" type="number">

.trim

自动过滤用户输入的首尾空白字符

<input v-model.trim="msg">

组件上也可以使用v-model