首页 > 其他分享> > 三、数据绑定

三、数据绑定

2022-07-21 21:35:22 作者：互联网

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