v-cloak的作用

最新推荐文章于 2024-03-17 21:04:26 发布

余一痴

最新推荐文章于 2024-03-17 21:04:26 发布

阅读量3.8k

点赞数 2

分类专栏：前端文章标签： vue html javascript css vue.js

本文链接：https://blog.csdn.net/yycnf/article/details/108310124

版权

前端专栏收录该内容

45 篇文章 6 订阅

订阅专栏

v-cloak的作用？

v-cloak指令的作用：防止页面加载时出现闪烁问题（解决插值表达式的闪烁问题）；

为什么会有闪烁问题昵？

代码加载的时候先加载HTML，把插值语法当做HTML内容加载到页面上，当加载完js文件后才把插值语法替换掉，所以我们会看到闪烁问题。

<html>
	 <style type="text/css">
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
 */
  [v-cloak]{
    /* 元素隐藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
		 也就是对应的标签会变为可见
    -->
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>//引入vue.js文件
  <script type="text/javascript">
    var vm = new Vue({
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存储的是数据
      data: {
        msg: 'Hello Vue'
      }
    });
	</script>
</body>
</html>

余一痴

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
v-cloak的作用

v-cloak的作用？v-cloak指令的作用：防止页面加载时出现闪烁问题（解决插值表达式的闪烁问题）；为什么会有闪烁问题昵？代码加载的时候先加载HTML，把插值语法当做HTML内容加载到页面上，当加载完js文件后才把插值语法替换掉，所以我们会看到闪烁问题。<html> <style type="text/css"> /* 1、通过属性选择器选择到带有属性 v-cloak的标签让他隐藏 */ [v-cloak]{ /* 元素隐
复制链接

扫一扫