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

Simple implementation of html hiding scroll bar

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

Simple implementation of html hiding scroll bar

How to turn off eslint detection in vue (multiple methods)

About the role of meta in HTML (collected and sorted from the Internet)

The Linux operating system uses Python to implement the visualization function of the task manager

How to deploy nodejs service using Dockerfile

Solution to the lack of my.ini file in MySQL 5.7

How to install docker using YUM

Master the CSS property display:flow-root declaration in one article

Summary of Vue first screen performance optimization component knowledge points

Summary of MySQL's commonly used database and table sharding solutions

Recommend

Specific use of Linux dirname command

Html to achieve dynamic display of color blocks report effect (example code)

Analysis of the implementation process of Docker intranet penetration frp deployment

Install Zookeeper under Docker (standalone and cluster)

Specific usage of fullpage.js full screen scrolling

The difference between MySQL database host 127.0.0.1 and localhost

Understanding and usage scenarios of ES6 extension operators

Detailed explanation of Vue lazyload picture lazy loading example

Solve the problem of forgetting password in MySQL 5.7 under Linux

Web page HTML code: production of scrolling text

Detailed explanation of the use of Vue's new built-in components

The difference between hash mode and history mode in vue-router

TypeScript namespace explanation

Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

ffmpeg Chinese parameter description and usage examples