web-dev-qa-db-ja.com

属性の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>

ただし、2行目はあまり好きではありません…ここで計算されたプロパティを使用しても、表示するツールチップがない場合は、data-toggle属性をまったく使用しないほうがよいでしょう。

vue.jsvuejs2
9
pilat

とてもエレガントなソリューション：

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

はい、はい、はい、空の文字列ではなく、ブール値falseが必要なだけです

13
arkadij_ok

何かのようなもの：

<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);
    }
}
5
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」属性が削除され、結果としてツールチップが完全に削除されます。 Bootstrapは、「title」属性を初期化すると自動的に追加され、「title」をfalseに変更しても削除されないため、「title」だけでなく「data-original-title」を使用する必要があります。 「data-original-title」。

3
nikojpapa

これは別の有効なソリューションですが、それほどエレガントではありません：

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