・「v-text」とは？どう使うの？
こんな疑問にお答えします。
「v-text」は定義された値を表示できるのが特徴です。
配下にあるテキストを全て置き換えてくれます。
今回は自分用のメモとして「v-text」について、まとめてみました。
参考にどうぞ
ということで、この記事では「Vue.jsのv-textの使い方」について解説していきます！
Vue.jsのv-textの使い方
目次
【解説 】Vue.jsのv-textとは
「v-text」とはディレクティブの1つで、Vueインスタンスに定義された値を表示することができます。
書き方はこちら↓
<p v-text="message"></p>これでmessageに定義された値を、pタグ配下のテキストに置き換えてくれます。
【解説 】Vue.jsのv-textの使い方【サンプルコードあり】
そんな「v-text」を使ったサンプル例がこちら↓
See the Pen vue v-text① by jito-coder (@jito-coder) on CodePen.
<div id="app">
<p v-text="message"></p>
<p v-text="message">こんにちは</p>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
})
}).mount('#app')「v-text」を付与したタグ配下のテキストが、全て置き換わっていますよね。
「こんにちは」と記述してあったpタグのテキストも、まるごと「おはようございます」となります。
値を表示するものとして、ほぼ同じような機能のマスタッシュ構文もありますよね。
マスタッシュ構文との違いが主にこちら↓
- ディレクティブとして使える
- 要素の配下を全て置き換えれる
逆にテキストの一部だけ置き換えたいときは、マスタッシュ構文を使うのがおすすめ。
<p>{{ message }}。今日もいい天気ですね。</p>
【解説】Vue.jsのマスタッシュ構文の使い方【コードあり】 ちなみに調べてみると、特に「v-text」を使う必要がないときは、マスタッシュ構文で統一したほうが良いのだそうです。
ちなみにインスタンスに定義したものがHTML構文の場合、そのまま文字列として表示されます。
例としてこちら↓
<div id="app">
<p v-text="message"></p>
</div>const app = Vue.createApp({
data: () => ({
message: '文字を<span>小さくする</span>'
})
}).mount('#app')
タグがそのまま文字列として表示されていますよね。
もしHTMLとして表示させたいときは「v-html」というディレクティブを使います。
【解説】Vue.jsのv-htmlの使い方【サンプルコード】 【解説 】Vue.jsのv-textの使い方【サンプルコードあり】：まとめ
- 「v-text」を使うと配下を全てインスタンスに定義した値に置き換える
- テキストの一部だけ置き換えたい場合はマスタッシュ構文を使う
- HTML構文を定義していた場合、文字列として表示される
「v-text」を使う時はためしてみてね！
