Vue中的单向数据绑定和双向数据绑定到底是什么

7 篇文章 0 订阅
3 篇文章 0 订阅
本文解析了Vue中的v-bind和v-model的区别:v-bind用于单向数据绑定,动态赋值标签属性;v-model是双向绑定,主要在表单元素中,数据双向流动。理解它们如何管理数据是Vue的核心概念之一。
摘要由CSDN通过智能技术生成

接触过vue的人,肯定听过这样的说法:

v-bind是单向数据绑定
v-model是双向数据绑定
数据是动态展示在页面上的

初识Vue的人可能是和我一样懵逼的,因为之前的前端开发和前端框架,并没有提到这种说法

下面就这两种数据绑定的形式,说一下我个人的理解

v-bind

简写是一个冒号,是一种单向的数据绑定方式,常常作用在标签属性上,实现为标签属性动态赋值的作用

这种改变是单向的,是不可逆的

数据动态的赋值给标签属性之后,标签属性的值是不能反向作用于数据,从而使数据改变的

v-model

是一种双向数据绑定的方式,只能作用于表单元素。

那表单元素是什么呢?通俗来讲,表单元素就是可以与用户交互,用户可以输入或者选择值的标签,

比如,单选复选,下拉类表,输入框等

数据可以动态赋值给表单元素

在赋值的过程中,数据首先会存入vue中的data对象中,然后data对象中的值再赋值给表单元素

如果表单元素修改了默认的赋值,那么修改后的数据也会更新至data对象中

简单来说,表单输入值可以赋值给data,data中的值也可以动态赋值表单元素

冷知识:我以为双向数据绑定会直接改变我代码中的数据,所以一直搞不明白
原来是把数据交给了vue去管理,这也属于vue中存在的数据代理,有兴趣的小伙伴可以去了解一下什么是数据代理

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值