插值表达式闪烁,网络慢Vue先显示花括号变量名_vue接口慢会先显示placeholder-程序员宅基地

技术标签: node.js  Web  web  vue.js  html  reactjs  

插值表达式闪烁,网络慢vue先显示花括号变量名

使用Vue的插值表达式有个坑,就是当网络加载慢的时候,Vue.js还没加载到浏览器来,如下代码:

<body>
	<div id="app">
		<p>{
   { msg }}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:'123'
		}
	})
</scirpt>

会先显示

{
   { msg }}

再显示

123

这样的用户体验感肯定是不好的,有如下解决方案:

解决办法一:使用Vue的v-cloak指令:

<style>
	[v-cloak]{
		display:none;
	}
</style>
<body>
	<div id="app">
		<p v-cloak>{
   { msg }}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:'123'
		}
	})
</scirpt>

完美解决!

解决办法二:使用Vue的v-text指令:

<body>
	<div id="app">
		<p v-text>{
   { msg }}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:'123'
		}
	})
</scirpt>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010511598/article/details/106196885

智能推荐

Unity GameFramework框架笔记-基础组件之ObjectPool_gameframework objectpoolbase-程序员宅基地

文章浏览阅读507次。自动释放对象逻辑:需要产生的对象数量大于容量,自动扩容自动释放:每个一段时间自动释放大于容量的个数过期判断:释放时,判断最后使用时间和过期时间(当前时间减一段时间,比如1分钟内未被使用),小于则为过期可释放的对象:未使用、未锁定、未自定义标记可释放每隔一段时间释放超过容量且可释放的对象,先释放过期的对象,再释放使用时间较早且优先级小的对象假设容量10,目..._gameframework objectpoolbase

mac版 IntelliJ IDEA 创建 spring boot 项目 没有spring initializr选项_mac idea没有spring initializer-程序员宅基地

文章浏览阅读7.6k次。mac版 IntelliJ IDEA 创建 spring boot 项目 没有spring initializr选项解决方案:_mac idea没有spring initializer

(php毕业设计源码)基于php毕业生招聘管理系统源码_php人才招聘系统源码-程序员宅基地

文章浏览阅读1.1k次,点赞4次,收藏12次。设计采用了php编程语言和mysql数据库开发的一套php毕业生求职招聘管理系统,系统共分为三个角色,分别为用户,企业,管理员,用户注册登录后可以查看招聘企业,招聘职位等信息,企业登录成功后可以发布招聘,查看用户的简历,管理员可以管理注册的用户,企业还有招聘信息。本设计采用php的原生开发,代码注释齐全,简单易懂,适合作为php毕业设计和php课程设计来进行学习。php版本: 5.3以上开发工具: notepad++,sublime,phpstorm都可数据库: mysql服务器: apache集成_php人才招聘系统源码

MySQL的存储过程_mysql存储过程-程序员宅基地

文章浏览阅读5.1w次,点赞108次,收藏726次。概念MySQL5.0版本开始支持存储过程,存储过程就是一组SQL语句集,功能强大,可以实现一些比较复杂的逻辑功能,类似于JAVA语言中的方法,存储过就是数据库SQL与层层面的代码封装与重用特性1.有输入输出参数,可以声明变量,有if/else/case/while等控制语句,通过编写存储过程,可以实现复杂的逻辑功能2.函数的普通特性:模块化,封装,代码复用3.速度快,只有首次执行需要经过编译和优化步骤,后续被调用可以直接执行,省去以上步骤格式创建存储过程-- 创建存储过_mysql存储过程

vite2+vue3在vite.config下使用env环境变量的方法_import { configenv, userconfigexport, loadenv } fr-程序员宅基地

文章浏览阅读3.3k次,点赞2次,收藏3次。There's a chicken-egg problem here: Vite expects to resolve .env files from project root, but project root can be made different by the config file.So if we resolve .env before resolving the config file, we can only resolve it from CWD, which would then b_import { configenv, userconfigexport, loadenv } from "vite

golangci-lint在vscode的使用,以及配置的一些探索-程序员宅基地

文章浏览阅读4.1k次,点赞2次,收藏8次。Go 语言自带套件为我们提供了静态代码分析工具 vet,它能用于检查 go 项目中可以通过编译但仍可能存在错误的代码。在维基百科是如下定义 lint 的:但是如果想要更多,就可以用golangci-lint。golangci-lint 是一个 linter 的集成框架。它集成了非常多的 linter,包括了上文提到的vet,合理使用它可以帮助我们更全面地分析与检查 Go 代码VScode配置golangci-lint VScode使用golangci-lint golangci-lint检测nil..._golangci-lint

随便推点

spark while_Spark程序启动的几种姿势-程序员宅基地

文章浏览阅读109次。本文主要讲述了Spark启动的几种姿势。对于spark(streaming)程序,我们通常是用shell脚本进行启动,而脚本的调用通常是由crontab或者调度系统例如azkaban定时启动,当然azkaban还有创建依赖等等功能。如果我们的程序触发条件是由某个主动行为,而非固定时间点或者是依赖某个任务呢?比如我想调个接口就可以启动spark程序? 姿势一 Azkaban API 调用Azkaba..._spark while

SQL中char、varchar、nvarchar、ntext的区别(转载)-程序员宅基地

文章浏览阅读276次。char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值。当你输入的字符大于指定的数时,它会截取超出的字符。nvarchar(n) 包含 n 个字符的可变长度 Unicode 字符数据。n 的值必须介于 1 与 4,000 之间。字节的存储大小是所输入字符个数的两倍。所输入的数据字符长度可以为零。 ..._sqlserver 数据库 nvarchar(max) 和ntext的区别

网络编程--出现bind error: Address already in use问题-程序员宅基地

文章浏览阅读4.5k次。网络编程--出现bind error: Address already in use问题_bind error

使用PlotNeuralNet绘制自己的网络结构图_plotneuralnet ubuntu 使用-程序员宅基地

文章浏览阅读2.6k次。绘制效果:源码下载:PlotNeuralNet只依赖于python和Latex,在ubuntu16.04下只需要安装texlive-latex-extra就行:sudo apt-get install texlive-latex-extra需要注意的是,如果bash中默认的python版本是python2,就需要将tikzmake.sh中的python $1.py 修改成python3 $1.py 然后就可以正常使用了。这个工具其实就是用python对latex的绘图脚本更进一步_plotneuralnet ubuntu 使用

Pandas : OverflowError: Python int too large to convert to C long问题解决的一个方法_pandas python int too large to convert to c long-程序员宅基地

文章浏览阅读1.8w次,点赞6次,收藏20次。有的时候,我们在处理dataframe时,需要将这些dtype(just means data type)是object的数据转换为int,如果数据很大的话,就会出现如下的报错:In [1]: data['itemId'] = data['itemId'].astype(int)Out[1]: Traceback (most recent call last): File "<ip..._pandas python int too large to convert to c long

linux设备驱动中的completion(kernel-4.7)_completion.c-程序员宅基地

文章浏览阅读4.3k次。completion定义定义的目录:include/linux/completion.h/* * struct completion - structure used to maintain state for a "completion" * * This is the opaque structure used to maintain the state for a "completio_completion.c

推荐文章

热门文章

相关标签