Vue2 数据双向绑定与单向绑定

布织锁云

已于 2023-06-02 10:16:09 修改

阅读量81

点赞数

文章标签： vue.js

于 2023-06-02 10:04:08 首次发布

本文链接：https://blog.csdn.net/qq_52731478/article/details/131000625

版权

该代码示例展示了如何在Vue.js中实现数据绑定，包括单向绑定（`v-bind`）和双向绑定（`v-model`）。当`vm.num`或`vm.num1`在JavaScript中被修改时，页面上的数据显示会相应更新。单向绑定仅从Vue实例到DOM，而双向绑定则确保了实例和输入字段之间的同步更新。

摘要由CSDN通过智能技术生成

数据绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="app">
        <fieldset>
            <legend>单向数据绑定</legend>
            <input type="text" v-bind:value="num">
            <!-- v-bind:value="num" 简写 :value="num" -->
            {{num}}
        </fieldset>
        <fieldset>
            <legend>双向数据绑定</legend>
            <input type="text" v-model:value="num1">
            <!-- v-model:value="num1" 简写 v-model="num1" -->
            {{num1}}
        </fieldset>
    </div>
    


    <script>
        // 创建vue实例
        const vm = new Vue({            //vm Vue{}
            el:'.app',  //指定容器
            data:{      //指定数据      修改数据，页面的数据也会随之变化
                num:5,
                num1:40
            }
        })
    </script>

</body>
</html>

单向绑定：
vm.num修改，页面会修改，但input修改值不会修改vm.num
s双向绑定
页面修改，vm.num会修改，vm.num修改页面也会修改