Vue.js v-htmlのサンプルコード

Vue.js v-htmlのサンプルコード

mastache(マスタッシュ)構文( {{hoge}})では、 HTMLがエスケープされてデータバインディング されるます。 v-htmlディレクティブ を利用すれば、エスケープされずにhtmlを利用することができます

注意

公式にも記載されているように 、 v-htmlにはXSSの危険性があるため 信頼できるコンテンツにだけ に利用してください

環境

  • OS  Windos10
  • エディタ VScode

サンプルコード

下記のソースコードをindex.htmlとして作成する

vue.jsは開発バージョンを利用してます
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

保存したファイルをブラウザで開いて確認 。 v-html使用した場合は、htmlとして認識されることが確認できる