vue.js - 如何在 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

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

这是一个 Plunker演示您如何着手的示例。

记下返回的对象:

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