Vue3 sample code to implement two-way binding of form input

What is two-way binding?

Bidirectional binding means a dynamic connection between the data model and the view. At any time, when the user enters data in the interface, the data model will be automatically updated; otherwise, if the data model changes, the interface will be updated accordingly. This real-time interactive experience greatly improves the convenience of users using forms.

Two-way binding in Vue 3

In Vue 3, two-way binding is mainly implemented through the v-model directive. It is basically the same as Vue 2. V-model is highly versatile and can be used for various form elements such as text input boxes, radio boxes, check boxes and selection boxes at the same time.

Basic examples

Let’s first look at a basic two-way binding implementation.

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

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

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

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

<style>
/* You can add CSS style here */
</style>

Code Analysis

• ref: passrefA responsive reference created by a function, which can be used directly in the template. Its initial value is an empty string.
• v-model: we willv-model="name"Bind to the input box, so when the user enters content in the input box,nameThe value of   will be updated accordingly.
• Data display: We also added apTags are used to display the content entered by the user to ensure the effect of two-way binding.

Complex example: Processing multiple inputs

In practical applications, forms often contain multiple input fields. The following example demonstrates how to process multiple inputs in Vue 3 and use two-way binding.

<template>
  <div>
    <h1>User registration</h1>
    <form>
      <div>
        <label for="username">username:</label>
        <input type="text"  v-model="" />
      </div>
      <div>
        <label for="email">Mail:</label>
        <input type="email"  v-model="" />
      </div>
      <div>
        <label for="password">password:</label>
        <input type="password"  v-model="" />
      </div>
      <button type="button" @click="register">register</button>
    </form>
    <div v-if="registeredUser">
      <h2>register成功的用户信息:</h2>
      <p>username: {{  }}</p>
      <p>Mail: {{  }}</p>
    </div>
  </div>
</template>

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

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

    const register = () => {
       = { ... }; // Simulation registration      // You can add registration API calls and other operations here    };

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

<style>
/* Styles can be added */
</style>

Code Analysis

• User object: We use an object to store the form data filled in by the user.userIncludeusername、emailandpasswordThree fields.
• Register a function: registerThe function simulates the registration behavior and assigns the information entered by the user toregisteredUser, displays the message that the user registration is successful.
• Conditional Rendering:whenregisteredUserWhen present, the registered user information is displayed, which demonstrates the conditional rendering ability of Vue 3.

summary

With the above examples, you have learned how to pass in Vue 3v-modelImplement two-way binding of form input. Whether it is processing a single input box or multiple input boxes,v-modelAll of them allow us to easily implement responsive data management.

If you need to implement more complex forms in your project, Vue 3 also provides many extension functions, such as a combination API, slots, etc., which you can flexibly use to improve your form implementation.

This is the article about the example code of Vue3 implementing two-way binding for form input. For more related contents of Vue3 form input, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!