首页 > 其他分享> 文章详细

三、数据绑定

2022-07-21 21:35:22 阅读：114 来源： 互联网

标签：Vue 数据绑定双向 data 页面

Vue中有2种数据绑定方式：

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

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

　　　　备注：

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

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

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>

    <!-- 引入VUE -->
    <script src="../js/vue.js"></script>

</head>
<body>

    <div id="root">
        单向数据绑定：<input type="text" :value="name"> <br/>
        双向数据绑定：<input type="text" v-model="name"> <br/>
    </div>

    <script>
        const x = new Vue({
            el:"#root",
            data:{
                name:''
            }
        });
    </script>

</body>
</html>

标签：Vue,数据,绑定,双向,data,页面
来源： https://www.cnblogs.com/WaterGe/p/16503625.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

三、数据绑定