每日分享- 前端 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 方法會被調用，進而輸出表單資料。