vue加载时闪现模板语法-处理方法

问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等

解决办法:

1、可以通过VUE内置的指令v-cloak解决这个问题(推荐)

具体实现:

<ul v-cloak v-for="item in items">

<li>{{ item.name }}</li>

</ul>

CSS中添加

[v-cloak]{ display: none; }

在vuejs指令中有 v-cloak ,这个指令保持在元素上直到关联实力结束编译。和CSS规则如 [v-cloak]{display:none} 一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。用法如下:

[v-cloak]{display:none;
}
<div v-cloak>{{message}}</div>

这样 <div> 不会显示,直到编译结束


2、可以在需要编译的元素前后加上<template></template>

3、通过切换需要编译元素的display属性,最开始设为none,请求完数据后设为block

4、VUE前置加载


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247738.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java数组 —(8)

1.数组的创建与元素赋值&#xff1a; 杨辉三角&#xff08;二维数组&#xff09;、回形数&#xff08;二维数组&#xff09;、6个数&#xff0c;1-30之间随机生成且不重复。 2.针对于数值型的数组&#xff1a; 最大值、最小值、总和、平均数等 3.数组的赋值与复制 int[] a…

idea启动tomcat时报错:Error during artifact deployment. See server log for details.

Error during artifact deployment. See server log for details. 这个很多人都找不出来&#xff0c;原因无非2个&#xff1a; 一、jar 包有有些没能识别&#xff0c;tomcat没有配置好&#xff01; 二、这个一般代码错了&#xff1a; 除了看 server 的报错&#xff0c;别忘了看…

java运算符 —(9)

1.理解&#xff1a; ① 定义在java.util包下。 ② Arrays:提供了很多操作数组的方法。 2.使用&#xff1a; //1.boolean equals(int[] a,int[] b):判断两个数组是否相等。int[] arr1 new int[]{1,2,3,4};int[] arr2 new int[]{1,3,2,4};boolean isEquals Arrays.equals(a…

css 三角角标样式

.sanjiao {width: 0px;height: 0px;overflow: hidden;border-width: 100px;border-color: red transparent transparent transparent; border-style: solid dashed dashed dashed; }

leetcode 279 四平方定理

可以用四平方和定理&#xff1a;任意一个正整数都可以表示为4个以内整数的平方和。 如果一个数含有因子4&#xff0c;那么我们可以把4都去掉&#xff0c;并不影响结果。比如&#xff1a;8去掉4&#xff0c;12去掉3&#xff0c;返回的结果都相同。 如果一个数除以8余7&#xff0…

java类与对象 —(10)

1.面向对象学习的三条主线&#xff1a; 1.Java类及类的成员&#xff1a;属性、方法、构造器&#xff1b;代码块、内部类2.面向对象的大特征&#xff1a;封装性、继承性、多态性、(抽象性)3.其它关键字&#xff1a;this、super、static、final、abstract、interface、package、…

RESTful API 编写规范

基于一些不错的RESTful开发组件&#xff0c;可以快速的开发出不错的RESTful API&#xff0c;但如果不了解开发规范的、健壮的RESTful API的基本面&#xff0c;即便优秀的RESTful开发组件摆在面前&#xff0c;也无法很好的理解和使用。下文Gevin结合自己的实践经验&#xff0c;整…

Python2与Python3的区别

Python2与Python3的区别 1) 核心类差异 Python3 对 Unicode 字符的原生支持。 Python2 中使用 ASCII 码作为默认编码方式导致 string 有两种类型 str 和 unicode&#xff0c;Python3 只 支持 unicode 的 string。Python2 和 Python3 字节和字符对应关系为&#xff1a; python2p…

JavaScript-内存空间

深入了解js这门语言后&#xff0c;才发现它有着诸多众所周知的难点&#xff08;例如&#xff1a;闭包、原型链、内存空间等&#xff09;。有的是因为js的设计缺陷导致的&#xff0c;而有的则是js的优点。不管如何&#xff0c;总需要去学会它们&#xff0c;在学习过程中我觉得只…

java类的结构1: 属性 —(11)

类的设计中&#xff0c;两个重要结构之一&#xff1a;属性 对比&#xff1a;属性 vs 局部变量 1.相同点&#xff1a; 1.1 定义变量的格式&#xff1a;数据类型 变量名 变量值1.2 先声明&#xff0c;后使用1.3 变量都其对应的作用域 2.不同点&#xff1a; 2.1 在类中声明的…

GXU - 7D - 区间求和 - 前缀和

https://oj.gxu.edu.cn/contest/7/problem/D 描述 有一个所有元素皆为0的数组A&#xff0c;有两种操作&#xff1a; 1 l r x表示将A区间[l,r]内所有数加上x&#xff1b; 2 l r表示将A区间[l,r]内从左往右数第i个数加上i&#xff1b; 给出m个操作&#xff0c;请输出操作结束后A中…

javascript-排序算法

插入排序 算法描述&#xff1a; 1. 从第一个元素开始&#xff0c;该元素可以认为已经被排序 2. 取出下一个元素&#xff0c;在已经排序的元素序列中从后向前扫描 3. 如果该元素&#xff08;已排序&#xff09;大于新元素&#xff0c;将该元素移到下一位置 4. 重复步骤 3&am…

DPDK并行计算

参考文献&#xff1a; 《深入浅出DPDK》 https://www.cnblogs.com/LubinLew/p/cpu_affinity.html ...................................................................... 前言&#xff1a; 处理器提高性能主要是通过两个途径&#xff0c;一个是提高IPC&#xff08;CPU每一时…

Highcharts图表-ajax-获取json数据生成图表

重点说明此代码是针对一个报表显示多个项对比显示。 直接贴代码&#xff1a;web端 <script type"text/JavaScript" src"js/jQuery/jquery-1.7.2.js"></script> <script type"text/javascript" src"j…

关于RGBDSLAMV2学习、安装、调试过程

Step&#xff11;&#xff1a;https://github.com/felixendres/rgbdslam_v2/wiki/Instructions-for-Compiling-Rgbdslam-(V2)-on-a-Fresh-Ubuntu-16.04-Install-(Ros-Kinetic)-in-Virtualbox 照着这个instructions安装好 rgbdslamv2&#xff0c;并且在安装的过程中&#xff0c;…

Java—List的用法与实例详解

List特点和常用方法 List是有序、可重复的容器。 有序指的是&#xff1a;List中每个元素都有索引标记。可以根据元素的索引标记&#xff08;在List中的位置&#xff09;访问元素&#xff0c;从而精确控制这些元素。 可重复指的是&#xff1a;List允许加入重复的元素。更确切地讲…

Java—遍历集合的N种方式总结Collections工具类

遍历集合的N种方式总结 【示例1】遍历List方法1&#xff0c;使用普通for循环 for(int i0;i<list.size();i){ //list为集合的对象名 String temp (String)list.get(i); System.out.println(temp); } 【示例2】遍历List方法2&#xff0c;使用增强for循环(使用泛型定义…

java类的结构2: 方法—(12)

面向对象的特征一&#xff1a;封装与隐藏 1.为什么要引入封装性&#xff1f; 我们程序设计追求“高内聚&#xff0c;低耦合”。 高内聚 &#xff1a;类的内部数据操作细节自己完成&#xff0c;不允许外部干涉&#xff1b; 低耦合 &#xff1a;仅对外暴露少量的方法用于使用。…

Docker 环境下部署 redash

环境&#xff1a; centos7 官网&#xff1a;https://redash.io/help/open-source/dev-guide/docker 一、安装步骤 1、虚拟机安装 安装vmware&#xff0c;并安装centos7 2、安装docker docker安装手册 3、安装nodejs centos下安装Nodejs 4、redash安装 1)、clone git repostory …

List接口常用实现类的特点和底层实现

List接口常用的实现类有3个&#xff1a;ArrayList、LinkedList、Vector。 那么它们的特点和底层实现有哪些呢&#xff1f; ArrayList特点和底层实现 ArrayList底层是用数组实现的存储。 特点&#xff1a;查询效率高&#xff0c;增删效率低&#xff0c;线程不安全。我们一般使用…