Vue.js
データバインディング
サーチ…
テキスト
データバインディングの最も基本的な形式は、 "Mustache"構文(二重中括弧)を使用したテキスト補間です。
<span>Message: {{ msg }}</span>
mustacheタグは、対応するデータオブジェクトのmsg
プロパティの値に置き換えられます。また、データオブジェクトのmsg
プロパティが変更されるたびに更新されます。
データ変更時に更新しない1回限りの補間を実行することもできます。
<span>This will never change: {{* msg }}</span>
生のHTML
ダブルキャッチは、データをHTMLではなくプレーンテキストとして解釈します。実際のHTMLを出力するには、トリプルマストを使用する必要があります:
<div>{{{ raw_html }}}</div>
内容はプレーンHTMLとして挿入されます。データバインディングは無視されます。テンプレート部分を再利用する必要がある場合は、partialを使用する必要があります。
属性
MustachesはHTML属性の中でも使うことができます:
<div id="item-{{ id }}"></div>
Vue.jsディレクティブと特殊属性では、属性の補間は許可されません。心配する必要はありませんが、Vue.jsは、くぼみが間違った場所で使用されているときに警告を発します。
フィルタ
Vue.jsでは、式の末尾にオプションの「フィルタ」を追加することができます。これは「パイプ」記号で表されます。
{{ message | capitalize }}
ここでは、組み込みのcapitalize
フィルタを使用してmessage
式の値を「配管」しています。これは、大文字の値を返すJavaScript関数です。 Vue.jsにはいくつかの組み込みフィルタが用意されており、後で独自のフィルタを書く方法についても説明します。
パイプ構文はJavaScriptシンタックスの一部ではないため、式の中にフィルタを混在させることはできません。あなたは式の最後にそれらを追加することしかできません。
フィルタは連鎖することができます:
{{ message | filterA | filterB }}
フィルタは引数を取ることもできます:
{{ message | filterA 'arg1' arg2 }}
フィルタ関数は、式の値を常に最初の引数として受け取ります。引用符で囲まれた引数は平易な文字列として解釈され、引用符で囲まれていない引数は式として評価されます。ここでは、平文の文字列'arg1'
が2番目の引数としてフィルタに渡され、式arg2
の値が評価され、3番目の引数として渡されます。