解决vue语法会有延迟加载显现{{xxx}}的问题

news/2024/7/10 0:55:32 标签: vue

一、问题描述:

我在做天气预报查询案例的时候遇到vue渲染问题。当我刷新的时候,就先是一闪一串加载{{}}然后就消失了。如以下图

在这里插入图片描述

二、解决办法:

在官网找到了解决方案:v-cloak

参照官网做法:

定义[v-cloak]的style:

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

使用了Mustache标签的地方加上v-cloak:

<div v-cloak>{{ message }}</div>

在这里插入图片描述
这样,Vue就可以隐藏未编译的 Mustache 标签直到实例准备完毕。实测效果很棒!
在这里插入图片描述
转载于:


http://www.niftyadmin.cn/n/1267735.html

相关文章

vs code技巧1:VSCode设置快捷创建常用代码段

文章目录前言VSCode设置前言 一直频繁的敲一些重复性的代码会让我们程序猿感到繁琐&#xff0c;所以我们需要设置快捷创建常用代码段帮我们偷偷懒。 VSCode设置 打开VSCode文件首选项用户代码段新建一个全局代码段&#xff08;根据个人需求选择&#xff09;取名 自定义.json…

Leetcode 1254:统计封闭岛屿的数目(超详细的解法!!!)

有一个二维矩阵 grid &#xff0c;每个位置要么是陆地&#xff08;记号为 0 &#xff09;要么是水域&#xff08;记号为 1 &#xff09;。 我们从一块陆地出发&#xff0c;每次可以往上下左右 4 个方向相邻区域走&#xff0c;能走到的所有陆地区域&#xff0c;我们将其称为一座…

Vue对class绑定的方式以及选择器.class1.class2和.class1 .class2的区别

Vue对class绑定的方式以及选择器 <div :class"{active:isPlaying}"></div> <div :class"{active:isPlaying&#xff0c;demo:isPlaying}"></div>active是否作用于该div元素上 由isPlaying数据来决定&#xff0c;为true时作用&…

Leetcode 1255:得分最高的单词集合(超详细的解法!!!)

你将会得到一份单词表 words&#xff0c;一个字母表 letters &#xff08;可能会有重复字母&#xff09;&#xff0c;以及每个字母对应的得分情况表 score。 请你帮忙计算玩家在单词拼写游戏中所能获得的「最高得分」&#xff1a;能够由 letters 里的字母拼写出的 任意 属于 w…

linux系统vim命令下出现press enter or type command to continue解决方法

linux系统vim命令下出现press enter or type command to continue解决方法

Leetcode 828:独特字符串(超详细的解法!!!)

如果一个字符在字符串 S 中有且仅有出现一次&#xff0c;那么我们称其为独特字符。 例如&#xff0c;在字符串 S "LETTER" 中&#xff0c;"L" 和 "R" 可以被称为独特字符。 我们再定义 UNIQ(S) 作为字符串 S 中独特字符的个数。 那么&#x…

阿里云服务器:ECS云服务器新手上路

一、ECS远程登录实践&#xff08;windows 登录 linux&#xff09; 1.点击安装的 putty 进入后 输入用户名 下载并安装putty&#xff0c;下载地址如下&#xff1a; 64-bit&#xff1a; https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe 32-bit&#xff1a; https://…

Leetcode 1256:加密数字(超详细的解法!!!)

给你一个非负整数 num &#xff0c;返回它的「加密字符串」。 加密的过程是把一个整数用某个未知函数进行转化&#xff0c;你需要从下表推测出该转化函数&#xff1a; 示例 1&#xff1a; 输入&#xff1a;num 23 输出&#xff1a;"1000"示例 2&#xff1a; 输入…