BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのクラスライブラリ

vue ディレクティブ v-html と v-text

2022-01-13 19:34:48

<スパン 1. v-text テキストレンダリングディレクティブ

<ブロッククオート

(テキストのみレンダリングし、タグはレンダリングしません) 


<div id="test">

        <p v-text="message"></p>

 </div>

 <script src=". /js/vue.js"></script>

 <script>
    const vm = new Vue({

            el:"#test",

            data:{

                message:"<h2>hello vue</h2>"

            }

        })

 </script>

出力されます。

2. v-html

<ブロッククオート

(ディレクティブのレンダリング、タグのレンダリングが可能) 


<div id="test">

        <p v-html="message"></p>

 </div>

 <script src=". /js/vue.js"></script>

 <script>

    const vm = new Vue({

            el:"#test",

            data:{

                message:"<h2>hello vue</h2>"

            }

        }) 

 </script>

出力されます。

以上、vueのディレクティブv-htmlとv-textについて解説しました。v-htmlとv-textについては、Script Houseの過去記事を検索するか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します