当前位置: 首页 > 编程日记 > 正文

VUE还没生效,页面闪屏的问题解决办法 v-cloak

当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

html:

<div id="app">{{context}}
</div>

js:

<script>var app = new Vue({el: '#app',data: {context:'互联网头部玩家钟爱的健身项目'}});
</script>

效果:

我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~

js 不变,在 div 中加入 v-cloak 指令。

html:

<div id="app" v-cloak>{{context}}
</div>

css:

[v-cloak]{display: none;
}

使用 v-cloak 指令之后的效果(demo):


在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。



作者:deniro
链接:https://www.jianshu.com/p/f56cde007210
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章:

如何使用Python创建,读取,更新和搜索Excel文件

This article will show in detail how to work with Excel files and how to modify specific data with Python.本文将详细显示如何使用Excel文件以及如何使用Python修改特定数据。 First we will learn how to work with CSV files by reading, writing and updating them.…

字符串基本操作

1.已知‘星期一星期二星期三星期四星期五星期六星期日 ’&#xff0c;输入数字&#xff08;1-7&#xff09;&#xff0c;输出相应的‘星期几’ s"星期一星期二星期三星期四星期五星期六星期日" iint(eval(input("请输入1-7的数字:"))) print(s[3*(i-1):3*i…

IOS长按识别二维码失败

IOS长按不识别二维码&#xff0c;出现放大图片的问题解决。 CSS加入样式&#xff1a; touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none; 代码&#xff1a; <!DOCTYPE html> <html><head><s…

从svn下载的Mavn项目,到本地后不识别(MyEcplise)

从svn上面现在的mavn的项目到本地不识别的原因 1.首先要确认本机的mavn的环境是否正确。 2.查看本机的Myecplise的mavn的环境配置是否正确 3.在cmd当中执行命令 mvn -Dwtpversion1.0 eclipse:myeclipse &#xff0c;可能svn上面的文件是eclipse建立的&#xff0c;需要进行转化。…

python导入外部包_您会喜欢的10个外部Python软件包

python导入外部包by Adam Goldschmidt亚当戈德施密特(Adam Goldschmidt) 您会喜欢的10个外部Python软件包 (10 External Python packages you are going to love) Python is an experiment in how much freedom programmers need. Too much freedom and nobody can read anoth…

【转修正】sql server行版本控制的隔离级别

在SQL Server标准的已提交读&#xff08;READ COMMITTED&#xff09;隔离级别下&#xff0c;一个读操作会和一个写操作相互阻塞。未提交读&#xff08;READ UNCOMMITTED&#xff09;虽然不会有这种阻塞&#xff0c;但是读操作可能会读到脏数据&#xff0c;这是大部分用户不能接…

【机器学习基石笔记】八、噪声和错误

噪声的来源&#xff1a; 1、noise in y 2、noise in x 在有noise的情况下&#xff0c;vc bound还会work么&#xff1f;&#xff1f;&#xff1f; 之前&#xff0c;x ~ p(x) 现在 y ~ P( y | x ) 在hoeffding的部分&#xff0c;只要 (x, y) 联合分布满足某个分布&#xff0c; 结…

H5用户地址位置选择地点获取经纬度(效果图)

效果图&#xff1a; uni-app <template><view class"flex-v flex-c wrap"><web-view src"https://apis.map.qq.com/tools/locpicker?search1&type1&key7QKBZ-SJ2HF-7TFJS-JL5NE-E6ZD7-SWFW5&referer鏅鸿兘鍚嶇墖"></we…

学习sql注入:猜测数据库_对于SQL的热爱:为什么要学习它以及它将如何帮助您...

学习sql注入:猜测数据库I recently read a great article by the esteemed craigkerstiens describing why he feels SQL is such a valuable skill for developers. This topic really resonated with me. It lined up well with notes I’d already started sketching out fo…

C++入门经典-例6.14-通过指针连接两个字符数组

1&#xff1a;字符数组是一个一维数组&#xff0c;引用字符数组的指针为字符指针&#xff0c;字符指针就是指向字符型内存空间的指针变量。 char *p; char *string"www.mingri.book"; 2&#xff1a;实例&#xff0c;通过指针连接两个字符数组&#xff0c;代码如下&am…

创建一个没有边框的并添加自定义文字的UISegmentedControl

//个性推荐 歌单 主播电台 排行榜NSArray* promoteArray["个性推荐","歌单","主播电台","排行榜"];UISegmentedControl* promoteSgement[[UISegmentedControl alloc]initWithItems:promoteArray];promoteSgement.frameCGRectMake(0, 6…

样式集(一) 通用商品列表样式

上图&#xff1a; 上代码&#xff1a; // pages/choosePackage/choosePackage.js Page({data: {list:[1,2,3],},onLoad: function (options) {},nav_upInfo(){wx.navigateTo({url: ../upInfo/upInfo,})}, }) <!--pages/choosePackage/choosePackage.wxml--> <view c…

2019 6月编程语言_今年六月您可以开始学习650项免费的在线编程和计算机科学课程...

2019 6月编程语言Seven years ago, universities like MIT and Stanford first opened up free online courses to the public. Today, more than 900 schools around the world have created thousands of free online courses, popularly known as Massive Open Online Cours…

mybatis分页练手

最近碰到个需求&#xff0c;要做个透明的mybatis分页功能&#xff0c;描述如下&#xff1a;目标&#xff1a;搜索列表的Controller action要和原先保持一样&#xff0c;并且返回的json需要有分页信息&#xff0c;如&#xff1a; ResponseBody RequestMapping(value"/searc…

样式集(二) 信息填写样式模板

上图&#xff1a; 代码&#xff1a; // pages/upInfo/upInfo.js Page({data: {tipsTxt: "请填写正确的业务流水号",showTips: false,showCityList:false,city:"",cityList:["济南市","青岛市","枣庄市","东营市"…

12小时进制的时间输出的编辑代码

关于时间输出的编辑代码个人思考了很久&#xff0c;包括顺序&#xff0c;进位之类的&#xff0c;求完善和纠错 public class yunsuanfu {public static void main(String[] arg){double t2;int h38;int m100;int s100;if(s>60){m(s/60)m;ss%60;}if (m>60){h(m/60)h;mm%6…

c++每调用一次函数+1_每个开发人员都应该知道的一些很棒的现代C ++功能

c每调用一次函数1As a language, C has evolved a lot.作为一种语言&#xff0c;C 已经发展了很多。 Of course this did not happen overnight. There was a time when C lacked dynamism. It was difficult to be fond of the language.当然&#xff0c;这并非一overnight而…

Linux ISCSI配置

一、简介 iSCSI&#xff08;internet SCSI&#xff09;技术由IBM公司研究开发&#xff0c;是一个供硬件设备使用的、可以在IP协议的上层运行的SCSI指令集&#xff0c;这种指令集合可以实现在IP网络上运行SCSI协议&#xff0c;使其能够在诸如高速千兆以太网上进行路由选择。iSCS…

样式集(三)成功页面样式模板

上图&#xff1a; 代码&#xff1a; <!--pages/result/result.wxml--> <view><image class"scc" src"/img/scc.png"></image><view class"resuil">办理成功</view> </view> <view class"btn…

C#中Request.servervariables参数

整理一下&#xff0c;我在asp.net下遍历的Request.servervariables这上集合&#xff0c;得出的所有参数如下&#xff1a; &#xff1a; Request.ServerVariables["ALL_HTTP"] 客户端发送的http所有报头信息 返回例&#xff1a;HTTP_CACHE_CONTROL:max-age0 HTT…

打开浏览器的包 node_如何发布可在浏览器和Node中使用的软件包

打开浏览器的包 nodeWhen you create a package for others to use, you have to consider where your user will use your package. Will they use it in a browser-based environment (or frontend JavaScript)? Will they use it in Node (or backend JavaScript)? Or bot…

存储过程中SELECT与SET对变量赋值

Create proc insert_bookparam1char(10),param2varchar(20),param3money,param4moneyoutputwith encryption---------加密asinsert into book(编号,书名,价格)Values(param1,param2,param3)select param4sum(价格) from bookgo执行例子&#xff1a;declare total_price moneyex…

AngularJs $resource 高大上的数据交互

$resource 创建一个resource对象的工厂函数&#xff0c;可以让你安全的和RESFUL服务端进行数据交互。 需要注入 ngResource 模块。angular-resource[.min].js 默认情况下&#xff0c;末尾斜杠&#xff08;可以引起后端服务器不期望出现的行为&#xff09;将从计算后的URL中剥离…

样式集(四)搜索框样式

上图&#xff1a; 代码&#xff1a; // pages/search/search.js var textPage({data: {input_val:"",list:[]},input_p(e){this.setData({input_val:e.detail.value})},onLoad: function (options) {}, }) <view classpage_row bindtap"suo"><vi…

初步了解React Native的新组件库firstBorn

first-born is a React Native UI Component Framework, which follows the design methodology Atomic Design by Brad Frost.first-born是React Native UI组件框架&#xff0c;它遵循Brad Frost的设计方法Atomic Design 。 Version 1.0.0 was recently published as an npm …

less里面calc() 语法

转载 Less的好处不用说大家都知道&#xff0c;确实让写CSS的人不在痛苦了&#xff0c;最近我在Less里加入calc时确发现了有点问题&#xff0c;我在Less中这么写&#xff1a;  div {  width : calc(100% - 30px);  }  结果Less把这个当成运算式去执行了&#xff0c;结果…

基于XMPP的IOS聊天客户端程序(XMPP服务器架构)

最近看了关于XMPP的框架&#xff0c;以文本聊天为例&#xff0c;需要发送的消息为&#xff1a; <message type"chat" from"kangserver.com" to"testserver.com"> <body>helloWord</body> </message> …

小程序云开发,判断数据库表的两个字段匹配 云开发数据库匹配之 and 和 or 的配合使用

云开发数据库匹配之 and 和 or 的配合使用 代码&#xff1a; // 获取成员消息onMsg2() {let that thiswx.cloud.init({env: gezi-ofhmx})const DB wx.cloud.database()const _ DB.command;var aa "1"var bb "2"DB.collection(message_logging).where…

react引入多个图片_重新引入React:v16之后的每个React更新都已揭开神秘面纱。

react引入多个图片In this article (and accompanying book), unlike any you may have come across before, I will deliver funny, unfeigned and dead serious comic strips about every React update since v16. It’ll be hilarious, either intentionally or unintention…

75. Find Peak Element 【medium】

75. Find Peak Element 【medium】 There is an integer array which has the following features: The numbers in adjacent positions are different.A[0] < A[1] && A[A.length - 2] > A[A.length - 1].We define a position P is a peek if: A[P] > A[P-1…