vue如何解决数据加载时,插值表达式闪烁问题
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
数据加载,插值表达式闪烁问题
1.在公共的css样式中加入
2.在el挂载的标签上添加
解决插值表达式渲染数据闪动
在使用Vue的时候,经常会用到插值表达式,也就是两个大括号{{}}的语法,但是有时候会出现如下问题
先看代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></ script > </ head > < body > < div id = "app" >{{mes}}</ div > < script > var app = new Vue({ el:'#app', data(){ return{ mes:'helloworld' } } }) </ script > </ body > </ html > |
出现的问题
浏览器疯狂刷新,在某一瞬间的是内容是这样的,然后才会显示为helloworld,会有一个闪动的问题,这其实是因为,如果单纯的 <div id="app">{{mes}}</div>一句话,浏览器是解析不出来的,而Vue它自己的语法中是去将页面的{{mes}}给解析出来,呈现出来在浏览器中,但在解析这期间是需要时间的,如果电脑运行速度慢,这就会越发的明显,如某贵校的电费充值页面
为了解决这种不友好的问题,Vue官方其实给出了办法的,使用v-cloak指令
解决方法如下图
原理就是让为编译的给事先隐藏,上面的[v-cloak]指的是属性选择器。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue.config.productionTip = false 不起作用的问题及解决
这篇文章主要介绍了Vue.config.productionTip = false为什么不起作用,本文给大家分析问题原因解析及解决方案,需要的朋友可以参考下2022-11-11vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题
在Vue项目构建过程中,如果遇到无法识别'vue-cli-service'命令的错误提示,通常是因为没有全局安装vue-cli,解决这个问题的步骤主要包括:首先检查Vue版本,如果未安装则先安装Vue;其次全局安装vue-cli;若在安装过程中遇到cnpm命令找不到的情况2024-10-10
最新评论