読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.jsその0002 text, unescapedText, onetimeText (Mustache Bindings)

制作 javascript vuejs

参考にさせて頂いたページ

yyx990803/vue · GitHub

Getting Started - vue.js

お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (2/4):CodeZine

バージョン

Vue.js v0.11.5

sample_vue.jsの記述内容

messageに格納する文字列にdiv要素を含めてみた。

var demo = new Vue({
  el: '#demo',
  data: {
    message: '<div>Hello Vue.js!</div>'
  }
})

sample_vue.htmlの記述内容

  • {{message}}
  • {{{message}}}
  • {{* message}}

の三種類の記述を試してみた。

<div id="demo">
  <input v-model="message">
  <p>htmlエスケープされる通常の出力 v-textディレクティブと等価</p>
  {{message}}
  <br><br><br>
  <p>htmlエスケープされない出力 v-htmlディレクティブと等価</p>
  {{{message}}}
  <br><br><br>
  <p>一度だけのバインディング</p>
  {{* message}}
  <br><br><br>
</div>

ブラウザでこのページを閲覧してみる

Getting Started - vue.js

に書いてあるのですが

sample.vue.htmlの中で{{message}}とした箇所にはエスケープされた文字列が挿入されるため
<div>Hello Vue.js!</div>
と表示された。
ここに表示されている文字列は、フォーム内の文字列を変更することで、リアルタイムに変化する。

sample.vue.htmlの中で{{{message}}}とした箇所にはエスケープされない文字列が挿入されるため
Hello Vue.js! と表示された。
ここに表示されている文字列は、フォーム内の文字列を変更することで、リアルタイムに変化する。

sample.vue.htmlの中で{{message}}とした箇所にはエスケープされた文字列が挿入されるため
<div>Hello Vue.js!</div>
と表示された。
ここに表示されている文字列は、フォーム内の文字列を変更しても変化しない。

今回はここまで。