要素のtextContentを更新するv-textディレクティブ [Vue.js]

ここでは、Vue.jsのv-textディレクティブについて紹介します。

v-textディレクティブ

Vue.jsでは、Vueインスタンスのdataオプションに定義したデータなどをHTML要素テキストに指定する場合に、マスタッシュ記法（{{}}）が利用できます。

マスタッシュ記法さえ覚えておけばテキストの出力はできますので問題ありませんが、Vue.jsにはディレクティブによってテキストを出力（更新）する方法も用意されています。

ディレクティブによってテキストを出力する場合は、v-textディレクティブを使用します。
v-textディレクティブは、マスタッシュ記法と同様にtextContentプロパティを設定します。

以下にv-textディレクティブの使用例を示します。

<span v-text="message"></span>

1	<span v-text="message"></span>

上記の例ではdataオプションに定義したmessageプロパティを、v-textディレクティブを使用してspan要素（タグ）のテキストに指定しています。

v-textで出力するテキストは、以下のようにマスタッシュ機能で指定した場合と同じ出力結果を得ることができます。

<span>{{message}}</span>

1	<span>{{message}}</span>

v-textディレクティブはテキストを出力しますので、以下のようにテキストがHTML形式になっていた場合でも、エンコードされて出力されます。

HTML

<span v-text="message"></span>

1	<span v-text="message"></span>

JavaScript

Vue.createApp({
  data: function() {
    return {
	  message: 'abc<br>def'
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

message: 'abc<br>def'

}

}).mount('#app')

上記のコードを実行（ブラウザーせ表示）した結果は以下のようになります。

出力結果

<div>abc<br>def</div>

1	<div>abc<br>def</div>

HTMLをエンコードせずに出力ディレクティブは、v-htmlという別のディレクティブとして用意されています。

次回は、ページに出力するテキストをそのままHTMLとして埋め込むことができるv-htmlディレクティブについて紹介します。

リンク