Home > Article > Web Front-end > How to implement form two-way binding in Vue

How to implement form two-way binding in Vue

王林Original: 2023-10-15 11:31:461146browse

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>

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: ''
  }
})

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>

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

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>

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

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>

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

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!

JavaScript html JS ui

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to optimize the search engine ranking of your Vue projectNext article：How to optimize the search engine ranking of your Vue project

See more

How to implement form two-way binding in Vue

Related articles