vue.js属性的条件呈现

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

data toggle=“tooltip”

我现在拥有的代码是：

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

{{col.col_spec.title}}

尽管如此，我不太喜欢第二行……即使我在这里使用computed属性，我还是不希望在没有工具提示显示的情况下使用

数据切换属性。
类似于：

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

下面是另一个可行但不那么优雅的解决方案：

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


{{col.col_spec.title}}
{{col.col_spec.title}}
有点晚了，但我的看法是：

HTML:

如果没有显示，这将删除“数据原始标题”属性，从而完全删除工具提示。您必须使用“数据原始标题”而不仅仅是“标题”，因为一旦您初始化“标题”属性，Bootstrap将自动添加它，并且将“标题”更改为false将不会删除“数据原始标题”。
非常优雅的解决方案：

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


{{col.col_spec.title}}

是的，是的，是的，只是需要不存在空字符串，而是布尔值false
如果您不希望属性在没有工具提示的情况下存在，那么我可能不会在模板中这样做，而是在mounted（）或类似的东西中这样做。@str不完全是这样。“required”更简单，它是一个“布尔属性”。我的问题涉及“一般属性”。@pilat不，完全一样。虽然
required
确实是一个值，但不能将
false
值传递给它。“元素上存在布尔属性表示真值，不存在该属性表示假值。”使用它的唯一方法是在DOM中使用它，或者不使用它。好吧，看起来不管它是什么类型的属性，如果它传递了“false”，它都不会被呈现。正是我需要的！非常干净的方法如果
此.col.col\u spec.tooltip更改，则该属性将不会有任何反应。。。有时组件不会重新装载，例如，如果vue路由器停留在相同的路由/页面（相同的组件），但转到新页面（不同的数据/url）。比如从
#/post/1
导航到
#/post/2
。这个答案是有条件地添加属性的唯一好方法。但是，要删除该属性，它不一定必须是
false
，也可以是
null
或
未定义的
。
<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;
    }
}

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