Detailed explanation of Vue two-way binding

1. Two-way binding
2. Will the same result occur when other tags are selected? The answer is of course yes:
3. Let’s look at another one:
4. Note
Summarize

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

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

Implementation code of Nginx anti-hotlink and optimization in Linux

Detailed explanation of Vue two-way binding

Table of contents

1. Two-way binding

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

3. Let’s look at another one:

4. Note

Summarize

Implementation code of Nginx anti-hotlink and optimization in Linux

In-depth analysis of MySQL 8.0 redo log

Linux platform mysql enable remote login

Two ways to export csv in win10 mysql

Detailed analysis of when tomcat writes back the response datagram

CSS3 to achieve dynamic background gradient effect

Explain how to analyze SQL efficiency

Detailed explanation of how to use amoeba to implement read-write separation of MySQL database

How to configure nginx to limit the access frequency of the same IP

Commonly used English fonts for web page creation

Recommend

Solution to the problem that docker CMD/ENTRYPOINT executes the sh script: not found/run.sh:

Detailed explanation of Vue's monitoring method case

Windows 10 + mysql 8.0.11 zip installation tutorial detailed

How to handle long data when displaying it in html

The difference between char and varchar in MYSQL

Vue implements dynamic circular percentage progress bar

An example of refactoring a jigsaw puzzle game using vue3

Kill a bunch of MySQL databases with just a shell script like this (recommended)

Some references about colors in HTML

Detailed explanation of new relational database features in MySQL 8.0

The difference and execution method of select count() and select count(1)

Deep understanding of the mechanism of CSS background-blend-mode

HTML6 implements folding menu and accordion menu example code

Steps to deploy ingress-nginx on k8s

A brief discussion on two current limiting methods in Nginx