How to implement form two-way binding in Vue-Vue.js-php.cn

How to implement form two-way binding in Vue

王林

Release： 2023-10-15 11:31:46

Original

1187 people have browsed it

How to implement form two-way binding in Vue

Vue is a popular JavaScript framework for building interactive user interfaces. It provides a two-way binding mechanism to keep data in sync with the UI. In Vue, two-way binding of form elements can be achieved through the v-model directive. This article will introduce in detail how to implement form two-way binding in Vue and provide some specific code examples.

First, we need to introduce the Vue.js library into the HTML file. It can be imported through CDN or local files.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue双向绑定</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
  <script src="index.js"></script>
</body>
</html>

Copy after login

Next, create a Vue instance in the JavaScript file and define a message variable using the data attribute.

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

Copy after login

In this example, we use the v-model directive to bind the input box and message variable. The message variable will automatically update when the user enters text in the input box and vice versa. The double curly brace syntax {{ message }} is used in the p tag to display the value of the message variable.

In addition to text input boxes, Vue can also implement two-way binding of other form elements, such as multi-select boxes, radio buttons and drop-down lists. Here are some specific code examples.

Multi-select box:

<div id="app">
  <input type="checkbox" v-model="isChecked">
  <p>{{ isChecked }}</p>
</div>

Copy after login

var app = new Vue({
  el: '#app',
  data: {
    isChecked: false
  }
})

Copy after login

Radio button:

<div id="app">
  <input type="radio" value="option1" v-model="selectedOption">
  <input type="radio" value="option2" v-model="selectedOption">
  <p>{{ selectedOption }}</p>
</div>

Copy after login

var app = new Vue({
  el: '#app',
  data: {
    selectedOption: ''
  }
})

Copy after login

Drop-down list:

<div id="app">
  <select v-model="selectedOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <p>{{ selectedOption }}</p>
</div>

Copy after login

var app = new Vue({
  el: '#app',
  data: {
    selectedOption: ''
  }
})

Copy after login

Through the above example, we can see how to implement it in Vue Two-way binding of forms. Through the v-model directive, we can easily bind form elements to data to achieve real-time updates of data. This two-way binding mechanism greatly simplifies the development process and improves development efficiency.

In addition to form elements, Vue also supports two-way binding of other types of elements, such as text areas and complex components. In actual projects, according to actual needs, we can flexibly use these techniques to achieve more complex UI interaction effects.

The above is the detailed content of How to implement form two-way binding in Vue. For more information, please follow other related articles on the PHP Chinese website!