表单的双向绑定

Vue 通过v-model="数据源"指令实现数据的双向绑定，这其实是一种语法糖。该指令适用于表单元素和组件。

<input :value="text" @input="event => text = event.target.value">
<!-- v-model 指令帮我们简化了这一步骤 -->
<input v-model="text">

当你在表单元素上使用v-model指令的时候，他会忽略表单元素上的value、checked、selected属性。
v-model还可以用于各种不同类型的输入，例如：<textarea>、<select>元素。
它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的<input>和<textarea>元素会绑定 value property 并侦听 input 事件；
• **<input type="checkbox">**和**<input type="radio">**会绑定 checked property 并侦听 change 事件（注意和输入类型的表单进行区分）；
• <select>会绑定 value property 并侦听 change 事件。

基本用法

表单文本

<input type="text" v-model="innerText" />

多行文本

<textarea v-model="message" placeholder="请输入"></textarea>

:::warning ⚠️ 注意
注意在<textarea>中是不支持插值表达式的，例如：<textarea>{{ text }}</textarea>。 :::

复选框

<input type="checkbox" v-model="cbChecked" />

v-model是以下内容的语法糖：

<input type="checkbox" :checked="cbChecked" @change="e => cbChecked = e.target.checked" />

checkbox 还可以用来勾选一组数据，它们都需要绑定同一个数据源数组：

<template>
  <p>
    <p>{{ selectedCountries }}</p>
    <p>中国<input type="checkbox" value="China" v-model="selectedCountries" /></p>
    <p>俄罗斯：<input type="checkbox" value="Russia" v-model="selectedCountries" /></p>
    <p>美国：<input type="checkbox" value="America" v-model="selectedCountries" /></p>
  </p>
</template>

单选框

**v-model**应用在 radio 上的时候，需要绑定同一个数据源：

<template>
  <p>
    <p>{{ gender }}</p>
    <p>男<input type="radio" value="male" v-model="gender" /></p>
    <p>女<input type="radio" value="female" v-model="gender" /></p>
  </p>
</template>

选择框

<select v-model="selectedValue">
  <!-- 如果未能匹配到对应的 value，那么页面就会显示空项，IOS 中时无法触发 change 事件的，用户时没办法选择第一项，所以需要给一个空的占位 -->
  <option disabled value="">请选择</option>
  <option value="zhangsan">张三</option>
  <option value="lisi">李四</option>
</select>
<!-- v-model 是一下内容的语法糖 -->

v-model是以下内容的语法糖：

<select :value="selectedValue" @change="e => selectedValue = e.target.value">
  <option disabled value="">请选择</option>
  <option value="zhangsan">张三</option>
  <option value="lisi">李四</option>
</select>

值绑定

对于单选按钮，复选框和选择器选项，v-model绑定的值通常是静态的字符串 (或者对复选框是布尔值)：

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Vue 容许我们传递自定义的数据绑定为其他的值。
例如在 checkbox 中通过true-value和false-value来绑定在勾选和非勾选情况下的值。

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

例如 radio 通过value属性「动态」绑定选中时候的值：

const app = {
  template: `
    <p>
        {{pick}}
      <input type="radio" v-model="pick" :value="first" />
      <input type="radio" v-model="pick" :value="second" />
    </p>`,
  data() {
    return {
      pick: "",
      first: "first",
      second: "second"
    };
  }
};

例如 select 动态的绑定值：

const app = {
  template: `
    <p>
        {{selected}}
      <select v-model="selected">
        <!-- 内联对象字面量 -->
        <option :value="{ number: 123 }">123</option>
      </select>
    </p>`,
  data() {
    return {
      selected: "",
    };
  }
};

修饰符

修饰符能够增强表单的功能，如下。

.lazy

默认情况下，v-model会在每次input事件后更新数据。通过.lazy修饰符来改为在每次change事件后更新数据：

const app = {
  template: `
    <p>
      {{textValue}}
      <input type="text" v-model="textValue" />
      <input type="text" v-model.lazy="textValue" />
    </p>`,
  data() {
    return {
      textValue: "",
    };
  }
};

.number

让用户输入自动转换为数字，你可以在v-model后添加.number修饰符来管理输入：

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

:::warning ⚠️ 注意
如果该值无法被parseFloat()处理，那么将返回原始值。
.number修饰符会在输入框有type="number"时自动启用。 :::

.trim

想要默认自动去除用户输入内容中两端的空格，你可以在v-model后添加.trim修饰符：

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