【Vue.jsプログラミング入門講座】テンプレート構文：変数の記述方法いろいろ

Vue.jsのテンプレートの変数の記述方法をいろいろと紹介します。
テンプレートの記述方法は、別記事「【Vue.jsプログラミング入門講座】Vue.jsのテンプレートの記述方法いろいろ 」をご覧ください。

基本形

Vue.jsのテンプレートに記述する変数はMustache記法を使います。
「{{」と「}}」で、Vueインスタンスのdataオブジェクトのプロパティを囲みます。
ちなみに、Mustacheは「口ひげ」の意味の英語です。
実際には次のようになります。

＜サンプルソース(Vueテンプレート)＞

<div id="app">
  {{ message1 }}
</div>

Vueインスタンスは次のように記述します。
dataオブジェクトの message1プロパティに設定されている文字列「こんにちは」が、テンプレート内の {{ message1 }} に設定され、描画されます。

＜サンプルソース(Vueインスタンス)＞

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message1: 'こんにちは'
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

こんにちは

三項演算子

Mustache記法のカッコ内には、三項演算子も設定することができます。

＜サンプルソース＞

<div id="app">
  {{ isOK ? 'YES' : 'NO' }}
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      isOK: true
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

YES

この例では、isOKの値がtrueの場合は「YES」が表示され、falseの場合は「NO」が表示されます。

三項演算子2

三項演算子の最初の項目は次のように条件判定式で記述することもできます。

＜サンプルソース＞

<div id="app">
  {{ (name === 'value1') ? '値1です' : '値2です' }}
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      name: 'value2'
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

値2です

この例では、nameの値がvalue1の場合は「値1です」が表示され、value2の場合は「値2です」が表示されます。

三項演算子3

三項演算子をつなげることもできます。
ただし、冗長的な記述になるため、できたら使わない方が良いと思います。

＜サンプルソース＞

<div id="app">
  {{ (fruit === 'banana') ? 'yellow' : (fruit === 'apple') ? 'red' : 'others' }}
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      fruit: 'apple'
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

red

HTMLの出力1 (Mustache記法を使った場合)

データの値に通常の文字列ではなく、HTMLを設定した場合について説明します。

＜サンプルソース＞

<div id="app">
  {{ html1 }}
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html1: '<span style="color:red">赤い靴履いてたらこけた</span>'
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

<span style="color:red">赤い靴履いてたらこけた</span>

Mustache記法の変数はHTMLはエスケープ(「< > " &」が「&lt; &gt; &quot; &amp;」に置換)されるため、HTMLソースがそのまま画面に表示されてしまいます。

HTMLの出力2 (v-htmlを使用)

Vue.jsのテンプレート内にHTMLを組み込む場合は、Mustache記法ではなく、v-htmlを使用すればOKです。

＜サンプルソース＞

<div id="app">
  <p v-html="html2"></p>
</div>

<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      html2: '<span style="color:red">赤い靴履いてたらこけた</span>'
    }
  })
</script>

＜実行結果(ブラウザ表示結果)＞

赤い靴履いてたらこけた

v-htmlを使うとHTMLはエスケープされません。
ただし、クロスサイトスクリプティング(XSS)に注意した上で使ってください(必要がない限り使わないのが望ましいです)。

今回は以上です。