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

Answer 3

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

HTML：

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

Vue的：

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

这将删除＆＃34; data-original-title＆＃34;属性如果没有要显示，则完全删除工具提示。你必须使用＆＃34; data-original-title＆＃34;而不只是＆＃34; title＆＃34;因为一旦初始化＆＃34;标题＆＃34;引导程序将自动添加它。属性，并改变＆＃34; title＆＃34; to false不会删除＆＃34; data-original-title＆＃34;。

Answer 4

这是另一种有效但不那么优雅的解决方案：

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

vue.js属性的条件呈现

4 个答案: