每日分享- 前端 Vue3 如何实现表单控件

Vue3 提供了一系列的表单控件，如 input、select、textarea 等，通过绑定表单数据和监听表单事件，可以实现表单数据的双向绑定和处理。

一 下面以input表单控件为例，详细说明如何实现表单控件。

1 创建 Vue 实例

首先，创建一个 Vue 实例，用于管理表单数据和表单事件：

<div id="app">
  <form>
    <label>姓名：</label>
    <input type="text" v-model="name">
    <br>
    <label>年龄：</label>
    <input type="number" v-model="age">
    <br>
    <button type="submit">提交</button>
  </form>
</div>           

const app = Vue.createApp({
  data() {
    return {
      name: '',
      age: 0
    }
  },
  methods: {
    onSubmit() {
      console.log(this.name, this.age)
    }
  }
})

app.mount('#app')           

2 绑定表单数据

使用 v-model 指令将表单控件和 Vue 实例的数据绑定起来，从而实现表单数据的双向绑定：

<label>姓名：</label>
<input type="text" v-model="name">           

这样，当用户输入表单数据时，表单数据会自动更新到 Vue 实例中的 name 属性中。

3 监听表单事件

使用 @ 符号或 v-on 指令监听表单事件，当表单事件触发时，执行 Vue 实例中的方法，从而实现表单数据的处理：

<form @submit.prevent="onSubmit">
  ...
</form>           

这样，当用户提交表单时，表单的 submit 事件会触发，Vue 实例中的 onSubmit 方法会被调用。

完整的示例代码如下：

<div id="app">
  <form @submit.prevent="onSubmit">
    <label>姓名：</label>
    <input type="text" v-model="name">
    <br>
    <label>年龄：</label>
    <input type="number" v-model="age">
    <br>
    <button type="submit">提交</button>
  </form>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      name: '',
      age: 0
    }
  },
  methods: {
    onSubmit() {
      console.log(this.name, this.age)
    }
  }
})

app.mount('#app')
</script>           

在上面的代码中，我们定义了一个包含 name 和 age 两个属性的 Vue 实例，并且使用 v-model 指令将表单控件和 Vue 实例的数据绑定起来，使用 @submit.prevent 监听表单的 submit 事件，并在 Vue 实例中定义了一个 onSubmit 方法，用于处理表单数据。当用户点击提交按钮时，表单的 submit 事件会触发，onSubmit 方法会被调用.

二 以select表单控件为例，详细说明如何实现表单控件：

1 创建 Vue 实例

<div id="app">
  <form>
    <label>性别：</label>
    <select v-model="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br>
    <button type="submit">提交</button>
  </form>
</div>           

const app = Vue.createApp({
  data() {
    return {
      gender: 'male'
    }
  },
  methods: {
    onSubmit() {
      console.log(this.gender)
    }
  }
})

app.mount('#app')           

2 绑定表单数据

<select v-model="gender">
  <option value="male">男</option>
  <option value="female">女</option>
</select>           

使用 v-model 指令将 select 表单控件和 Vue 实例的数据绑定起来，从而实现表单数据的双向绑定。

3 监听表单事件

<form @submit.prevent="onSubmit">
  ...
</form>           

使用 @submit.prevent 监听表单的 submit 事件，当用户提交表单时，Vue 实例中的 onSubmit 方法会被调用，从而处理表单数据。

完整的示例代码如下：

<div id="app">
  <form @submit.prevent="onSubmit">
    <label>性别：</label>
    <select v-model="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br>
    <button type="submit">提交</button>
  </form>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      gender: 'male'
    }
  },
  methods: {
    onSubmit() {
      console.log(this.gender)
    }
  }
})

app.mount('#app')
</script>           

在上面的代码中，我们使用 select 表单控件来实现性别选择，使用 v-model 指令将 select 表单控件和 Vue 实例的数据绑定起来，使用 @submit.prevent 监听表单的 submit 事件，并在 Vue 实例中定义了一个 onSubmit 方法，用于处理表单数据。当用户点击提交按钮时，表单的 submit 事件会触发，onSubmit 方法会被调用，从而输出表单数据。