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>v-cloak</title> 7 <script src="js/vue.js"></script> 8 <style> 9 [v-cloak]{ 10 display: none; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 <!--使用v-cloak 能够解决插值表达式闪烁的问题--> 17 <p>{{msg}}</p> 18 <!-- 默认 v-text 是没有闪烁的问题 --> 19 <h4 v-text="msg"></h4> 20 <!-- v-text 会覆盖元素中原本的内容,但是 插值表达式,只会替换自己的这个占位符 21 不会把,整个元素的内容清空 --> 22 <div>{{msg1}}</div> 23 <div v-html="msg1"></div> 24 </div> 25 <script> 26 var vm =new Vue({ 27 el:'#app', 28 data:{ 29 msg:'我是一只猫', 30 msg1:'<h1>白龙马,第二草席</h1>' 31 } 32 }) 33 </script> 34 </body> 35 </html>
v-cloak,v-html,v-text
猜你喜欢
转载自www.cnblogs.com/yuanxiangguang/p/11297616.html
今日推荐
周排行