【Vue.js】テキスト表示({{}}またはv-text)の使用方法

投稿日：2019-03-09

Vue.jsのデータや算出プロパティの結果をHTMLに出力するにはv-textまたは{{}} を使用します。
使い方を確認後、ボタンを押すと現在時刻を更新するサンプルプログラムを作成して動作確認します。

Vue.jsにおけるテキスト表示

Vue.jsでは、JavaScript内のデータをテキストとしてHTMLに描画したい場合は、{{}}またはv-textを使用することで簡単に実現できます。
テキストとして描画されたデータ内容が変更されると描画も自動で変更されます。
初期描画後にデータが変更されてても描画された内容を変更したくない場合は、要素に対してv-onceデレクティブを使用すると更新されなくなります。

テキスト描画({{}}またはv-text)の使用方法

テキスト描画はtemplateタグ内で使用していきます。
以下のように使用します。

<template>
  <div>
    <!-- v-textを使用する　-->
    <p>現在の時刻は<span v-text="[データや算出プロパティ]"></span>です</p>
    <!-- {{}}-->
    <p>現在の時刻は{{ [データや算出プロパティ] }}です</p>
  </div>
</template>

{{}}とv-textを使用する方法がありますが、基本的には楽な{{}}を使用します。
v-textを使用した方がいい場面はあまりないと思われます。

テキスト描画({{}}またはv-text)の使ってみる

サンプルプログラム作成

実際に使用してみます。
ボタンを押すと現在の時刻を再表示するプログラムを作成します。
またv-onceを使用してページを開いた時刻を同時に表示します。

Home.vueを以下のようにします。

<template>
  <div class="home">
    <p v-once>このページを開いた時刻:{{ currentTime }}</p>
    <p>現在の時刻:{{ currentTime }}</p>
    <button @click="onClick">時刻取得</button>
 </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
  private date: Date = new Date();

  private onClick() {
    this.date = new Date();
  }

  get currentTime() {
    return `${this.date.getHours()}時${this.date.getMinutes()}分${this.date.getSeconds()}秒`;
  }
}
</script>

3行目、4行目で「currentTime」を出力しています。
「currentTime」は算出プロパティで、データの「date」を使用して現在の時刻を表示しています。
3行目の「p」タグには「v-once」が指定しているので、dateが更新されても表示は更新されないようにしています。