vue--指令之v-cloak,v-text,v-html之间的区别

Posted 2021-12-01 yuanxiangguang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue--指令之v-cloak,v-text,v-html之间的区别相关的知识，希望对你有一定的参考价值。

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title>vue指令v-cloak</title>
 7 </head>
 8 <style>
 9     
10 [v-cloak]{
11 display: none;
12 }
13 
14 </style>
15 
16 <body>
17     <!-- v-cloak解决插值闪烁问题 -->
18     <div id="app">
19         <p v-cloak>{{msg}}</p>
20         <p v-text="msg"></p>
21         <!-- v-html转化代码 -->
22         <p v-html="msg1"></p>
23     </div>
24     
25     <script src="../js/vue.js"></script>
26     <script>
27         var vm = new Vue({
28             el: "#app",
29             data: {
30                 msg: ‘我是一只小猫‘,
31                 msg1:‘小狗喵喵‘
32             }
33         })
34     </script>
35 </body>
36 </html>

以上是关于vue--指令之v-cloak,v-text,v-html之间的区别的主要内容，如果未能解决你的问题，请参考以下文章