Vue 简写绑定

Question

在Vue中，有几种方法可以将属性绑定到HTML标签上。例如：

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

在当前控制器中，如果style作为属性或组件数据存在，则可以使用它。

一个更简短的方法是使用v-bind快捷方式：

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

我想知道是否有更简便的方法来完成这个操作，或者在Vue3中是否有类似的功能？我希望实现以下类似的代码：

<span :style></span>

可以的吗？

- santiago arizti

---

目前还不可能实现，而且关于Vue 3也不确定，因为稳定版本尚未发布。 - palaѕн

你可以使用Vue指令来实现类似的功能。我创建了一个使用指令的代码片段作为答案。 - muka.gergely

@muka.gergely的评论是误导性的，因为他没有正确理解手头的问题。所以，朋友们，不要再去理会他在列表下面的回答了。 - aefxx

@santiago arizti 我也在寻找完全相同的速记方式……那么我们现在就有两个人啦 :D - aefxx

看起来使用起来很直观。我也有同样的疑问。 - jean d'arme

Answer 1

2022年7月修订：

我在官方 playground 中尝试了更简短的版本，它可以正常工作。只需使用:="{attr}"即可。我没有在文档中看到这个语法的参考，所以不知道它有多官方。你甚至可以省略双引号，因为它是有效的html，但样式指南不赞成这样做。

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

查看运行效果，请访问sfc playground。

注：playground版本目前为@8dcb6c7

---

原始答案：

目前我找到的最佳解决方案是使用v-bind。

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

它允许您一次传递多个属性，从而节省空间，例如查看img的外观。

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

- santiago arizti

---

它能在Vue 2上工作吗？我看到sfc.vuejs.org只有Vue 3 playground。 - deekeh

我在 jsfiddle 上测试了 Vue 2.7，但出现了错误“: 不是有效的属性名”。我尝试过使用 DOM 模板和字符串模板。但我没有使用带有 vue 编译器的打包工具进行尝试。 - santiago arizti

Answer 2

为了让它起作用，您需要编写自己的指令：

Vue.directive('style', {
  bind: function(el) {
    el.classList.add('style')
  }
})

new Vue({
  el: "#app"
})

.style {
  font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-style>This is styled.</div>
  <div>This is not styled.</div>
  <div v-style>This is styled again.</div>
</div>

更多关于Vue指令的内容：https://v2.vuejs.org/v2/guide/custom-directive.html

- muka.gergely

---

这实际上没有实现问题所要求的内容。 - tony19

感谢您的输入，也许答案是没有办法做到这一点。我正在寻找一种传递具有相同名称的参数的通用方法，就像对象简写的工作方式一样：const name="myname"; const obj = {name}; - santiago arizti