Vue3手册译稿 - 基础 - 表单输入绑定

基础用法

你可以通过v-model指令创建与文本框、多行文本框以及选择框等表单输入组件的双向绑定，它会自动根据输入组件不同使用正确的绑定方式。虽然有点神奇的，但v-model本质上是用户输入控件更新数据的语法糖，对一些边界情况进行处理。

[warning]提示v-model会忽略表单单控件初始化的value,checked,selected属性。它总会将当前活动实例数据当成数据源。你应该在组件的javascript代码的data选项中定义这些初始值。

v-model内部针对不同的控件使用不同的属性和不同的事件调用方法：

• text、textarea使用value属性，事件用input；
• checkbox,radiobutton使用checked属性，事件用change；
• select使用props传递value，事件用change。

[notice]多国语言(中文、日文、韩文)等，在你可能注意到在输入过程中v-model是不更新数据的。如果你想跟踪这种更新，使用input事件监听绑定value来代替v-model。(个人感觉没有场景需要这种监听吧！)

文本框(text)

<input v-model="message" placeholder="请输入内容" />
<p>你输入的内容是： {{ message }}</p>

多行文本框(textarea)

<span>多行文本框输入的内容是：</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="输入多行内容"></textarea>

textarea中间插入文字不会工作，应该使用v-model代替

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框(checkbox)

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

多个checkbox绑定到一个数组上：

<div id="v-model-multiple-checkboxes">
  <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>
</div>

Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#v-model-multiple-checkboxes')

单选框(radio)

<div id="v-model-radiobutton">
  <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>

Vue.createApp({
  data() {
    return {
      picked: ''
    }
  }
}).mount('#v-model-radiobutton')

选择框(select)

单选选择框：

<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#v-model-select')

[info]如果v-model与数组任何一项都没有匹配成功，<select>标签会渲染成unselected状态。IOS环境下会导致默认第一个选项是空的，因为这种情况下IOS不支持改变事件。因此推荐初始一个不可选择的空值选项。
多选选择框(绑定到数组上)：

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br />
<span>Selected: {{ selected }}</span>

Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#v-model-select')

使用v-for动态渲染选项：

<div id="v-model-select-dynamic" class="demo">
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

Vue.createApp({
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}).mount('#v-model-select-dynamic')

绑定值

对于radio,checkbox,select选项，v-model绑定值默认为字符串(或checkbox使用布尔值)：

<!-- `picked` 值是一个字符串，当选择后赋值`a` -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 的值是真或假-->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 首项选中后赋值`abc` -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

有时候我们希望为当前实例控件绑定动态的值，我们可以通过v-bind实现。另外使用v-bind允许我们绑定一个非字符串的值。

checkbox

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

// checked:
vm.toggle === 'yes'
// unchecked:
vm.toggle === 'no'

[info]true-value,false-value并不影响控件的输入value属性，因为浏览器并不会把未选中的选项在表单中提交。如果想确保两个值只会提交一个(yes 或 no)，应该使用radio控件。

radio

<input type="radio" v-model="pick" v-bind:value="a" />

// when checked:
vm.pick === vm.a

select 选项

<select v-model="selected">
  <!-- 内联对象 -->
  <option :value="{ number: 123 }">123</option>
</select>

// selected:
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.layz

默认v-model同步输入框内容变化同步更改数据(中日韩等输入法除外)。你可以添加.lazy修饰符替代同步更新为change事件之后。

<!-- 在 "change" 更新而非 "input" -->
<input v-model.lazy="msg" />

.number

如果你想将用户输入自动转换为数值型，在v-model添加添加.number修饰符管理用户输入：

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

有时这很有用，因为即使为文本框添加了type="number"，仍然可能返回一个字符串。如果输入值可以转换为parseFloat()，将原值返回。

.trim

自动删除前后空格。

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

组件使用v-model

[info]如果对组件不熟悉，请先跳过。

HTML自带的组件经常满足不了实际需求，幸运的是Vue可以在可复用的自定文本框上使用v-model并拥有完整的自定义行为。查阅组件手册中自定义输入组件学习更多！