vue中的两种数据绑定方式

Krismile S

已于 2023-05-21 17:21:09 修改

阅读量538

点赞数

分类专栏： vue2单个知识点文章标签： vue.js javascript 前端

于 2023-05-10 19:22:57 首次发布

本文链接：https://blog.csdn.net/m0_73894967/article/details/130599183

版权

vue2单个知识点专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.v-bind:单向数据绑定

数据只能从data流向页面

<body>
   <div id="app">
      <span v-bind:msg="message"></span>
      <span :msg="message"></span>
   </div>
</body>
<script src="../js文件/vue.js"></script>
<script>
   new Vue({
      el:'#app',//管理dom节点入口
      data:{
         message:'abc'//页面中展示的数据
      }
   })
</script>

2.v-model:双向数据绑定(只能用在input里面)

数据不仅能从data流向页面,还可以从页面流向data

备注:

双向绑定一般都用在表单元素上(input , select)

v-model默认收集的值就是value值

工作原理:

v-model本质就是value + input方法的语法糖。

可以通过model属性的prop和event属性来进行自定义

原生的v-model，会根据标签的不同生成不同的事件和属性

text 和 textarea 元素使用 value 属性和 input 事件

checkbox 和 radio 使用 checked 属性和 change 事件

select 字段将 value 作为 prop 并将 change 作为事件

可以将v-model进行如下改写：

<input v-model="sth" />等同于

这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input

<input type='text' v-model='str'>

new Vue({
    el:'#app',
    data:{
        str:'abc'
     }
})

Krismile S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的两种数据绑定方式

可以将data中的数据同步到view中,data中的数据改变,view中的数据也会改变;这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。view和model两者中的任意一方数据发生变化时,另一方都会改变。v-model本质就是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。但是view中的数据改变时,data中的数据不会改变。1.v-bind:单向数据绑定。
复制链接

扫一扫