如何在 VueJS 中通过单个计算属性指定多个动态属性

Question

我有这个 html 元素：

<a href="javascript:">Link text</a>

我想按条件动态添加data-tooltip和属性：title

<a href="javascript:" data-toggle="tooltip" title="Some tooltip text">Link text</a>

VueJS中有没有办法同时添加多个动态属性：

<!-- instead of this: -->
<a href="javascript:" :data-toggle="computedPropTooltipToggle" :title="computedPropTooltipTitle">Link text</a>

<!-- something like this: -->
<a href="javascript:" ...tooltipAttributes >Link text</a>

Answer 1

您可以利用希望v-bind根据某些动态变化的条件应用多个属性的 DOM 元素。

这是一个Plunker示例，演示了如何进行操作。

记下返回的对象：

computed: {
  multiAttrs() {
    return this.showAttrs ? {
      'data-toggle': 'tooltip',
      title: 'Some tooltip text',
    } : null;
  }
}