Vue.js 中的 v-cloak 指令
2024-09-01 09:49:22
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
html:
<div id="app">
{{context}}
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
context:'互联网头部玩家钟爱的健身项目'
}
});
</script>
效果:
我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~
js 不变,在 div 中加入 v-cloak 指令。
html:
<div id="app" v-cloak>
{{context}}
</div>
css:
[v-cloak]{
display: none;
}
使用 v-cloak 指令之后的效果(demo):
在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令咯。
作者:deniro
链接:https://www.jianshu.com/p/f56cde007210
最新文章
- python 小程序 查找最大的python文件
- Understanding delete
- CSS 清除浮动的四种方法
- beeframework开发笔记1
- JSP写入MySQL数据库中出现乱码问题笔记
- Array vs Linked List
- Prelude
- Linux内存中的 buffer 和 cache 到底是个什么东东?
- Java面试03|并发及锁
- Springcloud 的Eureka和ZooKeeper比较
- Leetcode 两数之和 (散列表)
- 13 款惊艳的 Node.js 框架——第2部分
- 让你的应用支持新iPad的Retina显示屏
- iOS开发——iOS7(及以后版本) SDK自带二维码(含条形码)扫码、二维码生成
- C#实现在注册表中保存信息
- gcc编译把警告都输出成错误
- 解决navicat连接不上mysql服务器
- 架构师养成记--16.disruptor并发框架中RingBuffer的使用
- Linux下C语言编程中库的使用
- Android 模拟机出现Installation failed due to invalid URI!错误
热门文章
- nmap使用帮助翻译
- Harbor 批量清理历史镜像
- nodejs中使用mongodb
- Go 互斥锁(sync.Mutex)和 读写锁(sync.RWMutex)
- centos7上使用git clone出现问题
- [LeetCode] 392. 判断子序列 ☆(动态规划)
- 解决mysql登录警告问题
- 前端框架开始学习Vue(一)
- 理解下所谓的ssh隧道
- Flutter——AlertDialog组件、SimpleDialog组件、showModalBottomSheet组件(弹窗组件)