Vue 数据绑定_基础

最新推荐文章于 2024-05-14 07:25:43 发布

所念皆星河73

最新推荐文章于 2024-05-14 07:25:43 发布

阅读量348

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_60664694/article/details/127357626

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、单向数据绑定

特点：数据只能从 data 流向页面
v-bind


<body>
<div id="root">
  单向数据绑定： <input type="text/javeScript" v-bind:value="name">
</div>
<script>
  new Vue({
    el:"#root",
    data:{
        name:"尚硅谷"
    }

  })
</script>

</body>

打开vue的开发者工具，
在这里插入图片描述
数据只能从data流向页面，即只存在红色的箭头，不存在黑色的箭头。

2、双向绑定

特点：数据不仅能从 data 流向页面，还能从页面流向 data
v-model

<body>
<div id="root">
    
  	<!--  普通写法-->
    <!--单向数据绑定： <input type="text/javeScript" v-bind:value="name"><br>-->
    <!--双向数据绑定： <input type="text/javeScript" v-model:value="name"><br>-->
    <!--简写-->
    单向数据绑定： <input type="text/javeScript" :value="name"><br>
    双向数据绑定： <input type="text/javeScript" v-model="name"><br>
</div>
<script>
  new Vue({
    el:"#root",
    data:{
        name:"尚硅谷"
    }

  })
</script>

</body>

在这里插入图片描述
数据不仅能从 data 流向页面，还能从页面流向 data，即图中的两个箭头都存在。

<!--  v-model只能应用在表单类标签（输入类元素）上，因为此类标签能捕获用户的输入
      input标签的type属性来指定不同的元素：
          type="text" 普通的输入框
          type="password" 密码框
          type="radio" 单选框，需要注意的是：同一组单选框的name属性的值要一样
          type="checkbox" 多选框，需要注意的是：同一组多选框的name属性的值要一样。
      其他表单元素：select 下拉列表; textarea 文本域;

-->

3、总结

Vue中有2种数据绑定的方式：
  a.单向绑定(v-bind),数据只能从data流向页面
  b.双向绑定(v-model),数据不仅能从data流向页面，还可以从页面流向data
      备注：双向绑定一般都应用在表单元素上(如:input,select等)
           v-model:value 可简写为v-model,因为v-model默认收集的就是value值