Detailed explanation of Vue two-way binding

Detailed explanation of Vue two-way binding

1. Two-way binding

Two-way binding means that if your front-end data changes, the data in your data will also change. Similarly, if the data in your data changes, the data in the front-end page will also change. Moreover, this process does not require refreshing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- What you input will be displayed, in fact, the front-end data changes, and the message will change accordingly-->
    Input text: <input type="text" v-model="message">{{message}}
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
 </body>
</html>

Running results:

If the data in data is changed, the data in the front-end page will also change, as shown below:

insert image description here

If the front-end data changes, the data in your data will also change.

As shown below:

insert image description here

2. Will the same result occur when other tags are selected? The answer is of course yes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    gender:
    <input type="radio" name="sex" value="Male" v-model="message"> Male<input type="radio" name="sex" value="Female" v-model="message"> Female<p>Your gender is: {{message}}</p>
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
 </body>
</html>

Running results:

insert image description here

3. Let’s look at another one:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <select v-model="select">
        <option value="" disabled>--Please select--</option>
        <option>Male</option>
        <option>Female</option>
    </select>
    <span>Your choice: {{select}}</span>
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            select: ""
        }
    });
</script>
 </body>
</html>

Running results:

insert image description here

insert image description here

4. Note

v-model will ignore the initial values ​​of value , checked , and selected attributes of all form elements and always use the data of the Vue instance as the data source. You should declare initial values ​​in the component's data option via JavaScript! ! !

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Example code of vue custom component to implement v-model two-way binding data
  • The principle and implementation of two-way binding in Vue2.x
  • Implementation of two-way binding of parent-child component data in front-end framework Vue
  • A brief discussion on the principle of Vue's two-way event binding v-model
  • Using js to implement the two-way binding function of data in Vue2.0
  • How to implement two-way binding function in vue.js with pure JS

<<:  Overview and Introduction to Linux Operating System

>>:  Basic understanding and use of HTML select option

Recommend

How to use webSocket to update real-time weather in Vue

Table of contents Preface About webSocket operati...

Some summary of html to pdf conversion cases (multiple pictures recommended)

Due to work requirements, I recently spent some t...

MySQL 5.7.10 winx64 installation and configuration method graphic tutorial (win10)

MySQL is a relatively easy-to-use relational data...

Detailed code for implementing 3D tag cloud in Vue

Preview: Code: Page Sections: <template> &l...

English: A link tag will automatically complete href in IE

English: A link tag will automatically complete h...

MySQL database backup and recovery implementation code

Database backup #grammar: # mysqldump -h server-u...

18 sets of exquisite Apple-style free icon materials to share

Apple Mug Icons and Extras HD StorageBox – add on...

Solution to Linux QT Kit missing and Version empty problem

Currently encountering such a problem My situatio...

How to run .sh files in Linux system

There are two ways to run .sh files in Linux syst...

The difference and reasons between the MySQL query conditions not in and in

Write a SQL first SELECT DISTINCT from_id FROM co...

A complete guide on how to query and delete duplicate records in MySQL

Preface This article mainly introduces the method...

Detailed explanation of Vue3.0 + TypeScript + Vite first experience

Table of contents Project Creation Project Struct...

Sample code for converting video using ffmpeg command line

Before starting the main text of this article, yo...

JavaScript in-depth analysis of the direction of this and how to modify the direction

Table of contents this Method In the object Hidde...

Five delay methods for MySQL time blind injection

Five delay methods for MySQL time blind injection...