7 讲解v-cloak、v-text、v-html的基本使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 [v-cloak]{ 10 display: none; 11 } 12 </style> 13 14 </head> 15 16 <body> 17 <div id="app"> 18 <!-- 使用v-cloak能够解决插值表达式闪烁的问题 --> 19 <p v-cloak>{{msg}}</p> 20 <h4 v-text="msg"></h4> 21 <!-- 默认v-text是没有闪烁问题的 --> 22 <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 --> 23 <div>{{msg2}}</div> 24 <div v-text="msg2"></div> 25 <div v-html="msg2"></div> 26 </div> 27 28 <script src="./lib/vue-2.6.10.js"></script> 29 30 <script> 31 var vm = new Vue({ 32 el:'#app', 33 data:{ 34 msg:'123', 35 msg2:'<h1>哈哈，我是h1</h1>' 36 } 37 }) 38 </script> 39 </body> 40 </html>