vue.js屬性的條件呈現

我想了解在Vue.js中有條件地呈現HTML屬性的最佳方式是什麼。例如，如果存在當前實例的工具提示消息，請添加data-toggle="tooltip"。vue.js屬性的條件呈現

的代碼我現在有：

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

雖然，我不喜歡2號線多......就算我在這裏使用計算的財產，我不希望有data-toggle屬性可言，當沒有工具提示要顯示。

來源

2017-01-16 pilat

如果你不希望該屬性在沒有工具提示的情況下存在，那麼我可能不會在模板中這樣做，而是在掛載（）或類似的東西中。 – Bert

這裏還有一個工作，但沒有這麼優雅的解決方案：

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

來源

2017-01-17 03:31:24

喜歡的東西：

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

來源

2017-01-16 17:42:20 Bert

非常乾淨的做法 –

晚了一點，但這裏是我取就可以：

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

如果沒有，則顯示，因此完全移除工具提示這將刪除「數據原始標題」屬性。您必須使用「data-original-title」而不是「title」，因爲Bootstrap會在您初始化「title」屬性後自動添加它，並且將「title」更改爲false不會刪除「data-original-title」。

來源

2017-06-02 15:59:17 nikojpapa

vue.js屬性的條件呈現

回答

相關問題