三、数据绑定

 

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>
复制代码

 

posted @   WaterGe  阅读(51)  评论(0)  编辑  收藏  举报
相关博文：
·  四、el和data的两种写法
·  二、模板语法
·  Vue 二 --数据绑定
·  Vue中有两种数据绑定的方式：
·  Vue数据绑定
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示