四、数据绑定————温开水的复习笔记

最新推荐文章于 2024-05-08 11:05:31 发布

咕噜一口温开水

最新推荐文章于 2024-05-08 11:05:31 发布

阅读量51

点赞数

分类专栏： Vue 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_47286790/article/details/122735183

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

Vue的两种数据绑定方式

（一）单向绑定（v-bind）：数据只能从data流向页面

（二）双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面data

备注：（1）双向绑定一般应用在表单元素上（如：input、select）

（2）v-model:value 可以简写为v-model ，因为v-model默认收集的就是value值

示例代码

<!DOCTYPE html>
<html">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <!--  引入vue -->
    <script type="text/javascript" src="../vuejs/vue.js"></script>
</head>
<body>
    <!-- 容器 -->
    <div id="root">
        单向数据绑定:<input type="text" v-bind:value="name"><br>
        双向数据绑定:<input type="text" v-model:value="name">
        <!-- 下面的代码是错误的 -->
        <h2 v-model:x="name">name</h2>
    </div>

    <script type="text/javascript">
        //创建vue实例
        const vm = new Vue({
            el:'#root',  
            data:{
                name:"温开水",
                other:{           
                    url:"https://cn.vuejs.org",
                    name:"vue"
                }
                
            }
        });

    </script>
</body>
</html>