vue - v-text 和 v-html

1.官方有了{{data}}绑定数据了，为啥还要v-text 因为网络问题,可以我们会卡到看“{{}}”,很尴尬吧！！！ => 因此推荐用v-text

2. v-html是啥? 能吃吗 , v-html和innerHTML一样.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!-- Step1.对于vue,可以用cdn -->

     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

     <style>

         #app div{

             padding: 2%;

             margin-bottom: 1%;

             border-bottom: 1px solid #ddd;

             background-color: blanchedalmond;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <!-- 文本显示 -->

         <div>{{ message }}</div>

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

         <!-- html标签渲染 -->

         <div v-html="htmlMsg"></div>

     </div>

     <script type="text/javascript">

         var app = new Vue({

             el: '#app',

             data: {

                 message: 'Hei！！！',

                 htmlMsg: '<p>怎么了，输出了html标签!</p>'

             }

         })

     </script>

 </body>

 </html>

巴特西

vue - v-text 和 v-html

最新文章

热门文章