修飾子付きのカスタムディレクティブを定義する [Vue.js]

Vue.js The Progressive JavaScript Framework

本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。

カスタムディレクティブを定義する directive [Vue.js]
Vue.jsには、属性の形式でDOMツリー(文書ツリー)を操作する仕組みとしてディレクティブが用意されています。 ディレクティブに...

また、引数付きのカスタムディレクティブについても紹介しました。

引数付きのカスタムディレクティブを定義する [Vue.js]
本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。 カスタムディレクティブを自作することで...

今回は、引数付きのカスタムディレクティブに続いて、修飾子付きのカスタムディレクティブについて紹介します。

カスタムディレクティブの定義

ここでは、以下のカスタムディレクティブの定義にをもとに、修飾子付きのカスタムディレクティブを実装していきます。

修飾子付きのカスタムディレクティブ

以下に修飾子付きのカスタムディレクティブの実装例を示します。

上記の例では、要素のハイライトを行う「v-highlight」ディレクティブを定義しています。
「v-highlight」ディレクティブには、次の5種類の修飾子が指定できるようにしています。

  • back: 要素の背景色をハイライト表示します。
  • fore: 要素の前景色をハイライト表示します。
  • bold: 要素のテキストの太字をハイライト表示します。
  • border: 要素の罫線をハイライト表示します。
  • once: 要素に初回のみハイライトディレクティブを適用します。

定義したディレクティブは、HTMLテンプレート側で以下のように利用します。

ブラウザーでの実行結果

修飾子付きのカスタムディレクティブのサンプルの実行結果

修飾子の指定について

カスタムディレクティブの修飾子は、1つのディレクティブに複数指定することができます。
上記の例では、5つ目の要素に背景色を指定する「back」修飾子と、初回の1回のみ適用する「once」修飾子を同時に指定しています。

<span v-highlight.back.once=”color”>背景色のハイライトを指定</span>

Vue.js 入門 Tips 一覧