Vue数据绑定

85 阅读1分钟

在Vue中的数据绑定有两种:v-bind和v-model

  1. v-bind:
    绑定的数据只能从Vue中的data流向页面(也就是说只能起到展示data中的数据的效果)
    在页面中显示的就是我们可以将data中的数据放到input表单中,但是如果在将表单中的数据进行修改的话,就不会反馈到data里面的数据。
  2. v-model:
    绑定的数据可以实现双向流动,数据可以从Vue中的data流向页面,也可以从页面流向data(也就是说既可以在页面动态的显示data中的数据也可以将页面修改的数据反馈给data)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    单向数据绑定:<input type="text" v-bind:value="name"><!--数据只能从data流向页面-->
    <br>
    双向数据绑定:<input type="text" v-model:value="name"><!--v-model 只能应用在表单类元素上(输入类元素)-->
      <!--数据可以从data流向页面,也可以从页面流向data。-->
      <!--v-model:value  可以简写为v-model 因为model默认收集的就是value的值-->
</div>

</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'王亚楠'
        }
    })
</script>
</html>

欢迎大家批评指正