VUE课程参考---4、解决插值表达式闪烁问题
一、总结
一句话总结：
vue中解决插值表达式闪烁问题，可以用v-cloak指令，v-cloak在css中用属性选择器设置为display: none;
<style> /*属性选择器*/ [v-cloak]{ display: none; } </style> <div id="app"> <p v-cloak>{{msg}}</p> </div>
1、vue中v-cloak解决插值表达式闪烁问题 原理？
*、在vue没有被成功加载解析之前，p上带了v-cloak，用属性选择器设置样式为display: none;，所以元素被隐藏
*、在vue被成功加载解析后，vue会移除p标签上面的v-cloak，所以元素被显示出来了
二、解决插值表达式闪烁问题
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-cloak</title> 6 <style> 7 /*属性选择器*/ 8 [v-cloak]{ 9 display: none; 10 } 11 </style> 12 </head> 13 <body> 14 <!-- 15 cloak 16 英 /kləʊk/ 美 /kloʊk/ 17 n. （尤指旧时的）披风，斗篷；遮盖物；伪装，幌子；（复数）衣帽间，行李寄存处，盥洗室；（承担的）主要角色 18 v. 遮掩；隐匿；掩盖（事实、情感等）；给……披斗篷 19 20 v-cloak指令解决插值表达式闪烁问题 21 22 原理： 23 在vue没有被成功加载解析之前，p上带了v-cloak，用属性选择器设置样式为display: none;，所以元素被隐藏 24 在vue被成功加载解析后，vue会移除p标签上面的v-cloak，所以元素被显示出来了 25 26 --> 27 <div id="app"> 28 <p v-cloak>{{msg}}</p> 29 </div> 30 <script src="../js/vue.js"></script> 31 32 <script> 33 let vm=new Vue({ 34 el:'#app', 35 data:{ 36 msg:'2020年' 37 } 38 }); 39 </script> 40 </body> 41 </html>