vue中v-cloak的作用和原理解析
vue中v-cloak的作用和原理
1、作用
v-cloak 指令常用在插值表达式的标签中,用于解决当网络加载很慢或者频繁渲染页面时,页面显示出源代码的情况。
所以为了提高用户的体验性,使用指令 v-cloak,搭配着 CSS 一起使用,在加载时隐藏挂载内容,等到加载完毕再显示渲染后的数据。
2、原理
先通过样式隐藏挂载内容,等到数据渲染完成后,v-cloak属性会自动去除,页面会显示最终效果。
3、v-cloak的使用
① 在插值语法所在的标签处加上v-cloak指令
<h1 v-cloak>{{ name }}</h1>
② 在 css 中设置 v-cloak 的属性为 display: none
<style type="text/css"> [v-cloak] { display: none; } </style>
扩展:v-cloak指令的使用
v-cloak的使用场景
v-cloak指令常常用在插值表达式的标签中,因为它可以解决当网络加载很慢时,或者频繁渲染时候,页面就会显示出源代码的情况。
v-cloak的使用
首先,在差值语法所在的标签处加上v-cloak指令
<h3 v-cloak>{{name}}</h3>
然后,在css中设置v-cloak的属性为display为none
<style type="text/css"> [v-cloak]{ display: none; } </style>
v-cloak的原理
v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak 属性会被自动去除。
到此这篇关于vue中v-cloak的作用和原理的文章就介绍到这了,更多相关vue v-cloak作用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue中使用Echarts可视化图表宽度自适应的完美解决方案
这篇文章主要介绍了Vue中使用Echarts可视化图表,宽度自适应解决方案,我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,感兴趣的朋友跟随小编一起看看吧2022-09-09快速解决electron-builder打包时下载依赖慢的问题
使用 Electron-builder 打包,有时会在下载Electron、nsis、winCodeSign的过程中 Timeout 导致打包失败,本文给大家分享快速解决electron-builder打包时下载依赖慢的问题,感兴趣的朋友一起看看吧2024-02-02Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
这篇文章主要介绍了Vue图片浏览组件v-viewer用法,结合实例形式分析了v-viewer的基本功能与使用方法,包括旋转、缩放、翻转等操作技巧,需要的朋友可以参考下2019-11-11vue无法加载文件C:\xx\AppData\Roaming\npm\vue.ps1系统禁止运行脚本
这篇文章主要介绍了vue : 无法加载文件 C:\xx\AppData\Roaming\npm\vue.ps1...系统上禁止运行脚本问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
最新评论