参考にさせて頂いたページ
GitHub - yyx990803/vue: vue bug
お手軽データバインディングライブラリ「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>
ブラウザでこのページを閲覧してみる
に書いてあるのですが
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>
と表示された。
ここに表示されている文字列は、フォーム内の文字列を変更しても変化しない。
今回はここまで。