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,当没有工具提示显示时,我宁愿根本没有属性.

Answer 1

非常优雅的解决方案:

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

是,是的,是的,只需要没有空字符串,但布尔值为false

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);
    }
}