快捷導(dǎo)航

Vue3實現(xiàn)表單輸入的雙向綁定的示例代碼

更新時間：2025年01月22日 09:11:53 作者：JJCTO袁龍

Vue.js 是一個漸進(jìn)式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項非常核心的概念,尤其是在處理表單輸入時,它使得數(shù)據(jù)和用戶界面之間的互動變得簡單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實現(xiàn)表單輸入的雙向綁定

什么是雙向綁定？

雙向綁定意味著數(shù)據(jù)模型與視圖之間的動態(tài)連接。任何時候，當(dāng)用戶在界面中輸入數(shù)據(jù)時，數(shù)據(jù)模型會自動更新；反之，如果數(shù)據(jù)模型發(fā)生更改，界面也會相應(yīng)更新。這種實時的互動體驗極大地提升了用戶使用表單的便利性。

Vue 3 中的雙向綁定

在 Vue 3 中，雙向綁定主要通過 v-model 指令實現(xiàn)。與 Vue 2 的使用方法基本相同，v-model通用性強(qiáng)，能夠同時用于文本輸入框、單選框、復(fù)選框和選擇框等多種表單元素。

基礎(chǔ)示例

我們首先來看一個基本的雙向綁定實現(xiàn)。

<template>
  <div>
    <label for="name">姓名:</label>
    <input type="text" id="name" v-model="name" />
    <p>您輸入的姓名是: {{ name }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('');

    return {
      name,
    };
  },
};
</script>

<style>
/* 這里可以添加CSS樣式 */
</style>

代碼分析

ref: 通過 ref 函數(shù)創(chuàng)建的響應(yīng)式引用，這個引用可以在模板中直接使用。它的初始值為空字符串。
v-model: 我們將 v-model="name" 綁定到輸入框上，這樣用戶在輸入框中輸入內(nèi)容時，name 的值會隨之更新。
數(shù)據(jù)展示: 我們還在模板中添加了一個 p 標(biāo)簽來顯示用戶輸入的內(nèi)容，確保雙向綁定的效果。

復(fù)雜示例：處理多個輸入

在實際應(yīng)用中，表單往往包含多個輸入字段。下面的示例演示了如何在Vue 3中處理多個輸入并使用雙向綁定。

<template>
  <div>
    <h1>用戶注冊</h1>
    <form>
      <div>
        <label for="username">用戶名:</label>
        <input type="text" id="username" v-model="user.username" />
      </div>
      <div>
        <label for="email">郵箱:</label>
        <input type="email" id="email" v-model="user.email" />
      </div>
      <div>
        <label for="password">密碼:</label>
        <input type="password" id="password" v-model="user.password" />
      </div>
      <button type="button" @click="register">注冊</button>
    </form>
    <div v-if="registeredUser">
      <h2>注冊成功的用戶信息:</h2>
      <p>用戶名: {{ registeredUser.username }}</p>
      <p>郵箱: {{ registeredUser.email }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const user = ref({
      username: '',
      email: '',
      password: '',
    });
    
    const registeredUser = ref(null);

    const register = () => {
      registeredUser.value = { ...user.value }; // 模擬注冊
      // 可以在這里添加注冊API調(diào)用等操作
    };

    return {
      user,
      registeredUser,
      register,
    };
  },
};
</script>

<style>
/* 可以添加樣式 */
</style>

代碼分析

用戶對象: 我們使用了一個對象來存儲用戶填寫的表單數(shù)據(jù)，user 包含 username、email 和 password 三個字段。
注冊函數(shù): register函數(shù)模擬了注冊行為并將用戶輸入的信息賦值給 registeredUser，顯示用戶注冊成功的消息。
條件渲染：當(dāng) registeredUser 存在時，顯示注冊的用戶信息，這展示了 Vue 3 的條件渲染能力。