vue页面加载时闪现_Vue 闪现解决

场景介绍：页面加载数据时，原始代码{{}}闪现。

问题代码

• {{user.username}}
• {{user.email}}
• {{user.last_time}}

axios.get("http://127.0.0.1:8000/users/?format=json").then(function (response) {

var v = new Vue({

el:".root",

data:{

userProfile:response.data

},

}) ;

});

解决：

1. 加入css代码

[v-cloak] {

display: none;

}

2.view中引用css

• #这里
• {{user.username}}
• {{user.email}}
• {{user.last_time}}

axios.get("http://127.0.0.1:8000/users/?format=json").then(function (response) {

var v = new Vue({

el:".root",

data:{

userProfile:response.data

},

}) ;

});

达到效果，在数据为加载完成前，隐藏原始代码。

vue学习笔记(四)- cmd无法识别vue命令解决方法

解决控制台无法识别vue命令问题 作者:狐狸家的鱼 本文链接:cmd无法识别vue命令解决方法 GitHub:sueRimn 在控制台输入vue会报以下错误: vue : 无法将“vue”项识别为 c ...

vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如

{{value.name}}

& ...

vue.js 解决跨域问题

我们调试vue.js代码的时候一般都用chrome, 下载插件 进入chrome应用商店 搜索 重启chrome就可以解决跨域问题

vue中解决拖动和点击事件的冲突

BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

vue中解决时间在ios上显示NAN的问题

最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

关于vue如何解决数据渲染完成之前，dom树显示问题

在id="app"以下的标签中添加属性v-cloak 并且在css文件中添加[v-cloak]{display:none} 如果效果失效,这种原因是有几种可能,游览器大的解析加载速 ...

vue init 解决办法

/由于windows系统的某方面问题,vue脚手架安装可能会出现第一证书丢失 // 报错:vue-cli · Failed to download repo vuejs-templates/webpa ...

随机推荐

sqlite学习

一鼓作气,今天继续学习了sqlite数据库在Xcode上的一些操作,主要是通过用oc代码进行salite表格的创建,删除,修改:以及对现有的表格数据进行增,删,改,查.虽然有点累,但是收获不小,感觉很 ...

前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

C# 对Datatable排序

一,在C#中要对Datatable排序,可使用DefaultView的Sort方法.先获取Datatable的DefaultView,然后设置 得到的Dataview的sort属性,最后用视图的ToT ...

linux防火墙启动、停止、查看

停止防火墙 service iptables stop 启动防火墙 service iptables start 查看防火墙配置 iptables -L -n 修改的内容只是暂时保存在内存中,如果重启 ...

获取枚举Name,Value,Description两种方法

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

linux mysql无故无法启动了,centos 7

转自: http://support.moonpoint.com/software/database/mysql/not-running-centos7.php 下面简单翻译一下. 详细内容可以阅读英 ...

poj3728 商务旅行

[Description]小 T 要经常进行商务旅行,他所在的国家有 N 个城镇,标号为 1,2,3,...,N,这 N 个城镇构成一棵树.每个城镇可以买入和卖出货物,同一城镇买入和卖出的价格一样,小 ...

00-Unit_Common综述-RecyclerView封装

自学安卓也有一年的时间了,与代码相伴的日子里,苦乐共存.能坚持到现在确实已见到了"往日所未曾见证的风采".今2018年4月2日,决定用一个案例:Unit_Common,把安卓基础的 ...

python logging 日志轮转文件不删除问题的解决方法

项目使用了 logging 的 TimedRotatingFileHandler : #!/user/bin/env python # -*- coding: utf-8 -*- import log ...

CATransition 动画处理视图切换

一:引入包和头文件:   需要在frameworks中添加QuartzCore.framework 在接口程序中加上头文件   #import