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

Answer 2

这是另一个可行但不太优雅的解决方案：

<span v-if="!!col.col_spec.tooltip" data-toggle="tooltip" >
    {{ col.col_spec.title }}
</span>
<span v-else >
    {{ col.col_spec.title }}
</span>

Answer 3

有点晚了，但这是我的看法：

HTML:

<span
  :data-toggle="tooltip"
  :data-original-title="tooltipTitle"
>
  {{ tooltipTitle }}
</span>

视觉：

methods: {
    tooltipTitle: function() {
        var title = this.col.col_spec.title;
        if (!!title) return title;
        return false;
    }
}

如果要显示 none，这将删除 "data-original-title" 属性，从而完全删除工具提示。您必须使用 "data-original-title" 而不是仅 "title" 因为 Bootstrap 会在您初始化 "title" 属性后自动添加它，并且将 "title" 更改为 false 不会删除"data-original-title".

Answer 4

非常优雅的解决方案：

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

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

vue.js 属性的条件渲染

vue.js conditional rendering of an attribute

vue.js

vuejs2