v-bind绑定的作用(以及与v-model的区别)

在html代码中,v-bind绑定的是动态的表达式,而非固定的字符串,在v-bind后,就可以动态获取数据。

可以将v-bind理解为: 被v-bind修饰的都是动态获取的值。  而非被v-bind修饰的,仅仅是一个字符串

例如 :bind todo="item"; 在此例子中 item是一个表达式,item可以在其他地方动态变化;todo="item"   在此例子中,item是一个字符串,不代表其他任何意义。

vue中v-model和v-bind区别
Vue中的数据绑定
绑定数据有种方式:

插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定

v-bind:

v-model:

v-bind
eg:v-bind:class 可简写为 :class

当加上v-bind:之后,它的值classe不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给class属性传递什么值,当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。他只是单向变动

v-bind支持的类型
html中的属性、css的样式、对象、数组、number 类型、bool类型

v-bind使用:
// 绑定文本
<p v-bind="message"></p>
 
// 绑定属性
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>
 
// 绑定表达式
:class{className:true}
v-model
主要是用在表单元素中,它实现了双向绑定。在同事使用v-bind和v-model中,v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权,会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定。

<input v-model="something">

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结果才重要

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值