vue.js 条件渲染一个属性

Question

我想了解在 Vue.js 中有条件地呈现 HTML 属性的最佳方式是什么。例如，如果当前实例有工具提示消息，则添加 data-toggle="tooltip" 。

我现在的代码：

 <span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : ''"
  :title="col.col_spec.tooltip"
>
  {{ col.col_spec.title }}
</span>

虽然，我不太喜欢第二行……即使我在这里使用计算属性，我也宁愿根本没有 data-toggle 属性，因为没有要显示的工具提示。

原文由 pilat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

非常优雅的解决方案：

 <span
  :data-toggle="!!col.col_spec.tooltip ? 'tooltip' : false"
  :title="col.col_spec.tooltip"
>
  {{ col.col_spec.title }}
</span>

是的，是的，是的，只需要不是 _空字符串_，而是布尔值 false

原文由 arkadij_ok 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就像是：

 <span ref="column">
  {{ col.col_spec.title }}
</span>

在 Vue 中：

 mounted(){
    if (this.col.col_spec.tooltip){
      this.$refs.column.setAttribute("data-toggle", this.col.col_spec.tooltip);
    }
}

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议