vue加载显示{{xxx}}的解决方法 v-cloak
2023-09-27 14:24:39 时间
一般vue.js文件放在最后,由于浏览器是从头到尾的渲染机制,在没有读取到识别符对应的js控制语句就会直接显示{{xxx}}
这个问题可以用vue的一个特点解决,就是Vue会自动屏蔽掉自定义属性
我们可以为对应的dom节点添加一个自定义属性,比如 dom-hidden(官方:v-cloak)
然后css定义 : [dom-hidden]{ display:none;}
这个属性在vue加载完成后被忽略,于是就解决了加载慢的问题。
v-cloak
v-cloak
:保持和元素实例的关联,直到结束编译后自动消失。
v-cloak指令和CSS 规则一起用的时候,能够解决差值表达式闪烁的问题(即:可以隐藏未编译的标签直到实例准备完毕)。
解决办法是:通过v-cloak
隐藏{{name}}
这个内容,当加载完毕后,再显示出来。
-
用法:
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 - 示例:
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>
不会显示,直到编译结束。
当有弹出层用 v-if 判断是否显示,刷新网速慢时会闪现弹出层问题,也可以用上述方法解决。
相关文章
- vue - 总结build.js
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- 2 Vue 中的mounted()方法用 setInterval
- 【Vue】 错误:Already included file name ‘××ב differs from file name ‘××ב only in casing的解决方法
- 【Vue】在VsCode中报错 error ‘xxx‘ is assigned a value but never used的解决方法
- 【Vue】在新电脑部署Vue项目时,遇到的常见错误解决方法
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 【Vue】Vue中Date数组更改后不更新html视图元素显示的解决方法(完整示例)
- vue打包后出现一些map文件的解决方法
- Vue - 实现类似小程序 onShow() 一样的生命周期钩子方法(监听页面的显示,只要页面显示就执行代码)
- Vue - 解决 ElementUI / Ant Design Vue 框架组件带有默认回调参数方法时,同时传递默认参数和自定义参数
- Vue - 下载普通 URL 地址各种文件到本地
- Vue - cli3 项目打包方法及注意事项(cli 其他版本可进行参考)
- Vue - 点击按钮使浏览器进入全屏解决方案
- vue cli3使用官方方法配置sass全局变量报错ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- vue 路由嵌套 (子路由跳转报错或者失效解决方法)
- 5 vue-cli整合axios的几种方法
- vue 组件 子向父亲通信用自定义方法用事件监听
- vue 组件 模板input双向数据数据
- Vue知识点总结(1)——v-text、v-html(超级详细)
- vue-router有哪几种导航钩子?(具体怎么用的)
- Vue中监听数据是否渲染完成,完成后执行相关方法
- Vue Select默认选择项设置方法
- i18n在vue项目中使用
- vue中如何-巧-妙-的引入v-u-e--a-w-e-s-o-m-e-s-w-i-p-e-r
- vue组件异步渲染
- 5种处理Vue异常的方法
- Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法
- vue跨界域名报错,后台解决方法(未实测,仅供参考)
- vue 子组件触发父组件方法的两种方式