使用 v-cloak 防止页面加载时出现 vuejs 的变量名
页面 加载 出现 防止 vuejs 变量名 使用
2023-09-11 14:19:52 时间
先来看一段代码:
<ul v-for="item in items"> <li>{{ item.name }}</li> </ul>
当我们刷新页面的时候因为响应问题会看到 {{item.name}} 这个vue.js模板变量,这样给用户带来了不好的体验,那么要怎么解决这个问题呢?
答案就是加上一个:
v-cloak
代码如下:
<ul v-cloak v-for="item in items"> <li>{{ item.name }}</li> </ul>
然后在css中添加
[v-cloak] { display: none; }
搞定!
但是原理是什么呢?
这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。
在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。
相关文章
- nginx页面不能正常访问排除方法
- 【刷题】面筋-页面加载慢的原因
- 页面滚动动态加载数据,页面下拉自动加载内容
- ASP.NET Core错误处理中间件[4]: 响应状态码错误页面
- 34. SAP UI5 应用基于设备类型的页面适配功能(Device Adaptation)
- SAP ABAP Fiori Launchpad role based page - cached_sap_menu - 基于角色的页面显示原理
- 如何将SAP Spartacus的默认home页面替换成login页面 - ProtectedRoutesService
- SAP 电商云 Spartacus UI 产品明细页面路由确定后,加载的是 page template
- SAP Spartacus home页面product的加载逻辑
- WCF HTTP 错误 404.3 - Not Found(由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。如果应下载文件,请添加 MIME 映射。)
- SAP UI5 应用开发教程之六十九 - 如何从 SAP UI5 Not Found 页面跳转回到正常的应用页面试读版
- SAP Spartacus B2B User list页面的数据加载逻辑
- 40 个信息丰富且有趣的 CSS 404 错误页面示例
- Phantomjs 抓取、分析某个页面加载时浏览器发起的所有的子请求
- VS 点击页面自动定位到解决方案资源管理器目录位置
- 001-ant design pro 页面加载原理及过程,@connect 装饰器
- html页面的简单对话框(alert, confirm, prompt)
- Android页面事件挂接模拟
- Exploit Kit——hacker入侵web,某iframe中将加载RIG EK登录页面,最终下载并执行Monero矿工
- 进入页面js加载进度条demo效果示例(整理)
- 基于JavaScript水果库存系统主页面操作
- 如何将PPT的页面调整为竖向???