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

The pitfalls encountered when learning Vue.js

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

The pitfalls encountered when learning Vue.js

Enter the style file for the automatic search suggestion function: suggestion.css

How InnoDB cleverly implements transaction isolation levels

Detailed explanation of how to build a CDN server with Nginx (picture and text)

Understanding the Lazy Loading Attribute Pattern in JavaScript

JavaScript implements checkbox selection function

Analysis of the difference between HTML relative path and absolute path

Detailed analysis of replication in Mysql

Several ways to easily traverse object properties in JS

Native js implements a minesweeper game with custom difficulty

Recommend

12 Useful Array Tricks in JavaScript

React passes parameters in several ways

Using JS to implement a simple calculator

Introduction to the process of creating TCP connection in Linux system

How to install MySQL 8.0 in Docker

Django uses pillow to simply set up verification code function (python)

Example code for implementing raindrop animation effect with CSS

Detailed explanation of mktemp, a basic Linux command

Detailed tutorial on installing MySQL offline on CentOS7

How to implement scheduled automatic backup of MySQL under CentOS7

Can CSS be used like this? The art of whimsical gradients

How to implement the singleton pattern in Javascript

Installation and verification of pytorch in linux or windows environment (solving runtimeerror problem)

This article summarizes the specific use of CSS two-column layout and three-column layout

How to prevent users from copying web page content using pure CSS