Vue中双向绑定数据详解

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓。

你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

对v-model的理解
v-model本质上是一个语法糖。如下代码本质上是，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input。
v-model详解

接下来我们对各个组件都测试一遍双向数据绑定

1.文本框
data.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">

    <input type="text" v-bind:value="searchMap.keyWord">

    <input type="text" v-model:type="searchMap.keyWord">
    <p>您要查询的是:{{searchMap.keyWord}}p>
div>
<script>
    var vm=new Vue({
        el:"#app",
        //model：数据
        data:{
            searchMap:{
                keyWord:'lengding'
            }
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述
测试可以观察到，当在第一个文本框中输入数据的时候，其他两个位置的数据不会改变，这三个位置其实都是获得data中searchMap中的keyWord属性，当修改第二个输入框中的值时，三个数据会一起跟着变

2.单复选框
data.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
      
    <label for="checkbox">{{checked}}label>

div>
<script>
    var vm=new Vue({
        el:"#app",
        //model：数据
        data:{
            checked:false
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这里插入图片描述

3.多复选框
data.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">
    多复选框:
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jacklabel>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">Johnlabel>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mikelabel>
    <span>选中的值:{{checkedNames}}span>
div>
<script>
    var vm=new Vue({
        el:"#app",
        //model：数据
        data:{
            checkedNames:[]
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述
通过测试我们可以观察到，选几个，在后面的checkedNames数据中就会加入几个值，这里不用纠结是怎么加入到数组中的，官网上是v-model会根据类型自动选择正确的方式加入值，都是封装好的。

4.单选按钮
data.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">
    单选按钮：
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">Onelabel>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Twolabel>
    <span>选中的值{{picked}}span>

div>
<script>
    var vm=new Vue({
        el:"#app",
        //model：数据
        data:{
            picked:''
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述
5.下拉框

data.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>


<div id="app">
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择option>
        <option>Aoption>
        <option>Boption>
        <option>Coption>
    select>
    <span>选中的值：{{selected}}span>
div>
<script>
    var vm=new Vue({
        el:"#app",
        //model：数据
        data:{
            selected:''
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

相关阅读:
知识图谱+推荐系统文献阅读
 硬吃一个P0故障，「在线业务」应该如何调优HBase参数？
企业申请车辆前雾灯E-mark认证的前提条件
 分布式事务控制方案
 【物联网安全知多少？】
Android加固为何重要？很多人不学
 Leetcode 850. 矩形面积 II
STM32入门F4
酷开科技夯实流量基础，构建智慧生活新风尚！
如何打造一个属于自己的元宇宙电商-数字藏品NFG系统？
原文地址：https://blog.csdn.net/qq_41359998/article/details/122869404