记一笔Vue v-bind的一些语法糖

今天偶然看到 Vue3 的一个 issues#5462 大概意思是设置 DOM 属性 translate 为字符串 "no" 时不符合预期。
Vue 核心成员给出的解决方案是使用 <div ^translate="no"></div> 解决。

什么是 v-bind

直接查看官方文档

v-bind 修饰符

.camel

将 kebab-case 变成 camelCase。（平时都是使用字符串模版渲染，所以基本上不需要使用这个api）

<svg :view-box.camel="`0 0 100 100`">
  <rect x="0" y="0" width="10%" height="10%" />
</svg>
<!-- 渲染后html  -->
<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="10%" height="10%" />
</svg>

.prop

强制设置为 DOM property. (Vue@3.2+ 支持)

<div :test.prop="`name`"></div>
<!-- 等价于 -->
<div .test="`name`"></div>
<!-- 渲染后html，没有 attribute-->
<div></div>

可以理解为使用 .prop 修饰符，就是直接在 DOM 对象上添加属性。也就是 JavaScript 中的对象。

.attr

强制设置为 DOM attribute. (Vue@3.2+ 支持)

<div :translate.attr="`no`"></div>
<!-- 等价于 -->
<div :^translate="`no`"></div>
<!-- 渲染后html -->
<div translate="no"></div>

对于某些 HTML 元素来说，他们的 attribute 都有可选值。当我们像强制渲染成某些自定义值时这个api的作用就出现了。

比如 <button> 元素的 disabled 设置为非空字符串时，就会添加一个 disabled attribute。

1 2	<!-- 渲染后html --> <button disabled>click</button>

如果使用 .attr 修饰符后则可以渲染成。

1 2	<!-- 渲染后html --> <button disabled="false">click</button>

动态属性

以上就是我对 v-bind 的一些语法糖的输出，一些奇奇怪怪的感觉。

Wuxh