简写 Vue 绑定

Question

在 vue 中，有几种方法可以将属性绑定到 html 标签。例如

<span v-bind:style="style"></span>

其中style存在于当前控制器中，作为属性或作为组件数据。

更短的方法是使用简写v-bind：

<span :style="style"></span>

我想知道是否有更短的方法来做到这一点，或者 vue 3 中是否有类似的东西，我想要这样的东西：

<span :style></span>

这可能吗？

Answer 1

2024 年 1 月编辑：

Vue 3.4 准确地实现了我最初寻找的功能，请参阅公告博客文章

您现在可以缩短它：

<img :id="id" :src="src" :alt="alt">

对此：

<img :id :src :alt>

2022 年 7 月编辑：

我在官方操场上尝试了一个更短的版本，它有效。只需使用:="{attr}"即可发挥作用。我没有在文档中看到这个语法，所以我不知道这有多官方。您甚至可以省略双引号，因为它是有效的 html，但样式指南对此不以为然。

<span :={style}></span>

在sfc 游乐场中观看它的实际操作。

注意：游乐场版本 ATTOW @8dcb6c7

原答案：

到目前为止我最好的解决方案是使用v-bind

<span v-bind="{style}"></span>

它允许您一次传递多个属性，然后您实际上可以节省空间，例如看看 img 的样子

<img v-bind="{alt, src, title}" />