三、数据绑定

 

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 @ 2022-07-21 21:13  WaterGe  阅读(50)  评论(0编辑  收藏  举报