v-bind 指令常用修饰符

2,648 阅读1分钟
  • .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里?)
  • .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。

好多人的文档中都只是写个这,说实话,看不懂哦!(反正我看不懂)

1.先说.prop吧:

我觉得会用就可以了,而且这个修饰符我自己认为被用的次数很少。

prop 修饰符用途

v-bind 默认绑定到 DOM 节点的 attribute 上,使用 .prop 修饰符后,会绑定到 property

注意事项:

  • 使用 property 获取最新的值;
  • attribute 设置的自定义属性会在渲染后的 HTML 标签里显示,property 不会。

修饰符用途:

通过自定义属性存储变量,避免暴露数据
防止污染 HTML 结构

看了它的用途就知道,如果你不想你的属性显示在html标签里面,就用吧!

2.再说 .sync 吧:

这个修饰符我自己是用过的,当时看见这个写法的时候就感觉挺牛逼的,就是一个语法糖!!!  

作用:子组件直接改父组件的值!

如果没有这个语法需要咋搞呢?

很简单的demo,是不是需要这样搞才可以呢?就简单改一个money,或者简单的切换Boolean值,是不是这样写就会有一点点的麻烦呢?

好吧,那我们用.sync试试吧!

懂了吗?

是不是很简单!哈哈,你学废了吗?

.camel我不想学了,有好文章的麻烦给个链接,我看一下!