Vue 3教程 - 表单

双向数据绑定

定义数据

JavaScript

export default {
  data() {
    return {
      email: '',
      role: 'student',
    }
  }
}

绑定对应的HTML字段

markup

<form>
  <input type="email" required v-model="email"/>
  <select v-model="role">
    <option value="student">Student</option>
    <option value="teacher">Teacher</option>
    <option value="parent">Parent</option>
  </select>  
</form>  

在进行数据绑定的时候，也可以绑定JS对象的某个属性：

markup

<input type="email" required v-model="student.email"/>
```  

### 使用修饰符modifier

比如：
* trim: 自动去除表单字段中空格
* number: 设定数字型字段
* lazy: 只有当失去输入焦点时才触发事件，这时绑定的不是key事件，而是onChange事件。这样能**提升性能**。

``` html
<input type="email" required v-model.trim="email"/>
<input type="text" required v-model.number="score"/>

这些修饰符还可以结合在一起使用：

markup

<input type="email" required v-model.trim.lazy="email"/>
<input type="number" required v-model.number.lazy="score"/>

使用复选框

定义数据

JavaScript

export default {
  data() {
    return {
      terms: false,
      hobby: [],
    }
  }
}

绑定对应的HTML字段

只要在HTML中的checkbox绑定同一个数据（hobby），就相当于把这些复选框放在了同一个组中。

markup

<form>
  <input type="checkbox" required v-model="terms"/>
  <label>Agree terms and conditions</label>
  <div>
    <input type="checkbox" value="football" v-model="hobby"/>
    <label>足球</label>
  </div>
  <div>
    <input type="checkbox" value="basketball" v-model="hobby"/>
    <label>篮球</label>
  </div>
</form>  

提交表单

form标记

注意这里需要添加事件修饰符，比如 @submit.prevent ，这样就能禁用默认提交动作（刷新页面）。

markup

<form @submit.prevent="handleSubmit">

当然，如果不添加事件修饰符，也可以在提交方法中使用JS传统方式来禁用默认动作：

JavaScript

submitForm(event) {
  event.preventDefault();
}

提交代码

JavaScript

handleSubmit() {
  // 验证

  // 提交
}

按回车键提交代码

markup

<input @keyup.enter="submitForm" type="number" id="score" v-model.number="score" />

v-once

可以使用v-once来绑定一个字段，这样该字段只会被渲染一次，从而提升页面性能。

例如：

markup

<p v-once>{{ address }}</p>
<button @click="address = '123 Fake Street'">Change address</button>

v-pre

要求Vue不编译对应的内容，比如下面的代码：

markup

<p v-pre>{{ address }}</p>

将会在页面显示 ，而不是具体的address值。