Vue.js開発入門 > Chapter 2 データを表示するとき

02 データをそのまま表示する:{{ データ }}

Vue.jsでデータを表示させる方法は、3つ用意されています。

  1. マスタッシュタグ「{{ }}」を使う。
  2. 「v-text」ディレクティブを使う。
  3. 「v-html」ディレクティブを使う。

マスタッシュタグ「{{ }}」

Vueインスタンスで、用意したデータをそのまま表示するときは、マスタッシュタグ「{{ }}」を使います。
(Mustacheとは、口ひげという意味です。)

HTMLのテキストを表示する部分に

{{ データのプロパティー名 }}

と書けばOKです。

  • hello1.html
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue.js sample</title>        
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    
    <body>
        <h2>データをそのまま表示する例</h2>
        <div id="app">
            <p> {{ myText }}</p>
        </div>
 
        <script>
            new Vue({
                el: '#app',
                data: {
                    myText:'Hello!!!'
                }
            })
        </script>
    </body>
</html>
  1. div要素とVueインスタンスを紐づける。
  2. 文字を表示させたい場所に、マスタッシュタグでプロパティー名を囲んで書く。
  3. Vueインスタンスの「data:」オプションに表示させたいデータのプロパティーを用意する。

「v-text」ディレクティブ

ディレクティブとは?

Vur.jsでは、HTMLの要素に対して行う命令は「ディレクティブ」を使います。
Vue.jsのディレクティブとは、「要素に対してVueがどんなことを行うかを指示する命令」のことで、頭に「v-」という接頭辞が付いています。

データをそのまま表示するという機能として、「v-text」というディレクティブが用意されています。

「v-text」の書式

<タグ名 v-text="表示データのプロパティー名"></タグ名>
  • hello2.html
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue.js sample</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    
    <body>
        <h2>データをv-textで表示する例</h2>
        <div id="app">
            <p v-text="myText"></p>
        </div>
 
        <script>
            new Vue({
                el: '#app',
                data: {
                    myText:'Hello!!!'
                }
            })
        </script>
    </body>
</html>

これで<p v-text="myText"></p>の中にmyTextプロパティーの値「Hello!!!」が表示されます。

v-textというディレクティブも一応用意はされていますが、単純に文字を表示させるだけなら、マスタッシュタグで書いた方がシンプルですね。

「v-html」ディレクティブ

マスタッシュタグやv-textディレクティブでは、文字をそのまま表示していますが、HTMLとして表示させるときは「v-html」ディレクティブを使います。

「v-html」の書式

<タグ名 v-html="表示データのプロパティー名"></タグ名>
  • hello3.html
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue.js sample</title>        
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    </head>
    
    <body>
        <h2>HTMLで表示する例</h2>
        <div id="app">
            <p>{{ myText }}</p>
            <p v-text="myText"></p>
            <p v-html="myText"></p>
        </div>
 
        <script>
            new Vue({
                el: '#app',
                data: {
                    myText:'<h1>Hello!!!</h1>'
                }
            })
        </script>
    </body>
</html>

これをWebブラウザー(Chrome)で見ると、

HTMLで表示する例
<h1>Hello!!!</h1>
<h1>Hello!!!</h1>
Hello!!!

と表示されました。

マスタッシュタグとv-textでは、そのまま「<h1>Hello!!!</h1>」という文字列として表示されており、HTMLとして解釈(変換)はされていません。

しかし、v-htmlでは「<h1>Hello!!!</h1>」という文字列がHTMLとして解釈(変換)されて、大きい文字の「Hello!!!」と表示されていました。

「v-html」の注意点

HTMLを簡単に埋め込めるv-htmlは便利ですが、ユーザーの入力データを表示させるような局面で使うと、不正なJavaScriptコードなどを埋め込まれてしまうことも可能なので、セキュリティーが低くなります。

v-htmlを使う場合は、どんなデータが埋め込まれるのかをよく検討して、安易に使うことは避けましょう。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-11 (日) 00:11:52 (12d)