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の属性を持っていないことを好むだろう...多くの第二ラインが好きではありません表示するツールチップはありません。

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

そしてVueの中で：

Answer 1

ここで別の作業ではなく、とてもエレガントなソリューションですそれに：

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

結果的に完全にツールチップを取り外し、表示する。存在しない場合、これは、「データ・オリジナル・タイトル」属性を削除します。ブートストラップは "title"属性を初期化すると自動的に追加されるので、 "title"の代わりに "data-original-title"を使う必要があります。 "title"をfalseに変更しても "data-original-title"は削除されません。

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

が、ここに私のテイクです：

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