Vue模板语法——v-cloak

一、什么是指令

• 指令的本质就是自定义属性
• 指令的格式：以v-开始，比如：v-cloak

二、v-cloak指令用法

• 插值表达式存在的问题：“闪动”
• 如何解决该问题：使用v-cloak指令
• 解决该问题原理：先隐藏，替换好值后再显示最终的值

三、v-cloak指令的用法

1. 提供样式

   [v-cloak]{
      display: none;
   }

1. 在插值表达式所在的标签中添加v-cloak指令

例如：
<style type="text/css> [v-cloak]{ display: none; } </style> <div id=‘app‘> <div>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:‘#app‘, data:{ msg:‘HelloWorld‘ } }) </script>

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

Vue模板语法——v-cloak

原文：https://www.cnblogs.com/fpgz99810/p/12461162.html