vue如何解决数据加载时,插值表达式闪烁问题

目录
  • 数据加载,插值表达式闪烁问题
    • 1.在公共的css样式中加入
    • 2.在el挂载的标签上添加
  • 解决插值表达式渲染数据闪动
    • 先看代码
    • 出现的问题
    • 解决方法如下图

数据加载,插值表达式闪烁问题

1.在公共的css样式中加入

[v-cloak] {
    display: none !important;
}

2.在el挂载的标签上添加

<div class="#app" v-cloak>
    <p>{undefined{value.name}}</p>
</div>

解决插值表达式渲染数据闪动

在使用Vue的时候，经常会用到插值表达式，也就是两个大括号{{}}的语法，但是有时候会出现如下问题

先看代码

<!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]指的是属性选择器。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • vue如何解决数据加载时,插值表达式闪烁问题

    vue如何解决数据加载时,插值表达式闪烁问题

    目录 数据加载,插值表达式闪烁问题 1.在公共的css样式中加入 2.在el挂载的标签上添加 解决插值表达式渲染数据闪动 先看代码 出现的问题 解决方法如下图 数据加载,插值表达式闪烁问题 1.在公共的css样式中加入 [v-cloak] {     display: none !important; } 2.在el挂载的标签上添加 <div class="#app" v-cloak>     <p>{undefined{value.name}}</p&g

  • 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

    懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import

  • vue前端页面数据加载添加loading效果的实现

    vue前端页面数据加载添加loading效果的实现

    目录 前端页面数据加载添加loading效果 具体实现 全局loading配置 1 再src/componennts/Spinner下面建立一个index.vue 2 再utils下面tools.js 3 再utils下面建议一个request.js 封装的axios请求 4 修改app.vue 前端页面数据加载添加loading效果 在前端上传文件或者加载数据的时候会有一段等待时间,如果加上一个loading效果会减轻用户等待的枯燥,这里就来记录学习一下如何实现loading效果. 效果大致如

  • 详解Vue.js在页面加载时执行某个方法

    jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 总结 以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • Vue实现让页面加载时请求后台接口数据

    目录 让页面加载时请求后台接口数据 Vue请求后台数据几种方式 1.vue-resource官方提供的vue的一个插件 2.axios的使用 3.fetch-jsonp不受跨域限制 让页面加载时请求后台接口数据 <template>   <div class="hello">     <div>       {{title}}     </div>     <hr>     <button @click="co

  • Vue Router根据后台数据加载不同的组件实现

    目录 实际项目中遇到的需求 有一些不好的实现方式 个人感觉比较好的实现方式 功能已实现,但我又开始了新的思考 最终方案--高阶组件 实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可以不使用vue-router,直接把所有组件,都写在一个文件里面,全部通过v-if判断,也是可行的.(前提是几万行代码一起,你不嫌麻烦的话) 在渲染这个链接的时候,直接

  • 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

    Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vue在使用ECharts时的异步更新和数据加载详解

    前言 最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm  下面话不多说了,来一起看看详细的介绍吧. 使用方法 使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo

  • vue 防止页面加载时看到花括号的解决操作

    如下所示: <style> [v-cloak]{ display:none } </style> v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理 补充知识:vue花括号数据绑定不成功的问题 我就废话不多说了,大家还是直接看案例吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

随机推荐