vue之v-cloak指令

已于 2022-02-08 15:16:11 修改
阅读量461 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-02-08 15:15:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31676483/article/details/122824208
版权

、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、

在这里插入图片描述
当vue.js文件还没加载完成时，页面没法解析就会显示模板语法：
在这里插入图片描述
而且此时元素后台还有v-cloak，直到文件加载完成拿到数据时消失
在这里插入图片描述

如果加上v-cloak指令，就会不渲染，等到vue.js文件加载完成有数据时就会显示正常。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
等vue.js文件加载完成拿到数据
在这里插入图片描述
此时的系统会在后台自动删除v-cloak；
在这里插入图片描述

小结：
v-cloak配合css解决因为网速慢，出现模板语法的情况；
数据加载完成时，后台会自动删除v-cloak

火红_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）
08-27
在 Vue 中，使用 v-cloak 指令可以解决刷新或者加载出现闪烁问题（显示变量）。当我们使用 Vue 绑定数据时，在渲染页面时会出现变量闪烁，例如 `<div class="#app"> <p>{{value.name}}</p></div>` 在加载的时候会...
Vue中的v-cloak使用解读
08-31
v-cloak 指令是 Vue.js 中的一个特殊指令，用于隐藏未编译的 Mustache 标签直到实例准备完毕。在本文中，我们将详细介绍 v-cloak 的使用方法、作用和注意事项。 v-cloak 的作用和用法 ------------------- v-cloak...
VUE——v-cloak指令
最新发布
汪汪汪汪
03-07 256
功能：利用vue实例化后v-cloak属性会消失，设置其样式。属性选择器，可以控制vue实例化完成前的dom样式。'关于v-cloak的用法'
v-cloak
weixin_39616739的博客
10-06 178
v-cloak：保持和元素实例的关联，直到结束编译后自动消失。 v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。 就拿上一段代码来举例，比如说，{{name}}这个内容，在网速很慢的情况下，一开始会直接显示{{name}}这个内容，等网络加载完成了，才会显示smyhvae。那这个闪烁的问题该怎么解决呢？ 解决办法是：通过v-c...
v-cloak指令的使用
liyongchunscr的博客
07-19 5978
v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak属性会被自动去除。v-cloak指令常常用在插值表达式的标签中，因为它可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况。然后，在css中设置v-cloak的属性为display为none。首先，在差值语法所在的标签处加上v-cloak指令。v-cloak的使用场景。...
v-cloak指令
fushan2012的博客
02-22 4202
v-cloak
vue.js v-model的运算
qq_37805832的博客
02-15 1423
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javasc
v-cloak的作用
yycnf的博客
08-30 3809
v-cloak的作用？ v-cloak指令的作用：防止页面加载时出现闪烁问题（解决插值表达式的闪烁问题）； 为什么会有闪烁问题昵？ 代码加载的时候先加载HTML，把插值语法当做HTML内容加载到页面上，当加载完js文件后才把插值语法替换掉，所以我们会看到闪烁问题。 <html> <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐
Vue.js 中的 v-cloak 指令及使用详解
10-17
主要介绍了Vue.js 中的 v-cloak 指令及使用详解，通过案例给大家简单介绍了vue中v-cloak的使用，感兴趣的朋友跟随小编一起看看吧
Vue指令之 v-cloak、v-text、v-html实例详解
12-29
在指定标签或整个父容器加入v-cloak指令，通过css选择器选中v-cloak，隐藏元素即可。 // html <span>{{ msg }} // css [v-cloak]{ display:none; } // vue实例对象 => vm var vm = new Vue({ el:'#app', data...
Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
01-08
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍： 一、插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义： 通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了 Document {{msg}} var vm=new Vue({ el:#app, data:{ msg:Hello Vue! } }) 由于插值表达式的语法是{{}} 因而也被称为mustache胡子
Vue中的 v-cloak 指令
m0_72759446的博客
08-21 806
【代码】Vue中的 v-cloak 指令。
v-cloak（自用）
博客标题不能为空
09-19 364
v-cloak（自用）
Vue内置指令——v-cloak
沐小侠
06-29 458
v-cloak指令用于解决插值表达式的“闪动”问题。 原理：先隐藏，替换好值之后显示最终的值。在数据渲染完场之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了，属性选择器就选择不到该标签，也就是对应的标签会变为可见。......
vue2基础-vue指令
weixin_45002586的博客
11-10 518
vue 指令
v-cloak的用法和注意事项
weixin_30419799的博客
04-26 160
v-cloak是前端框架vue.js中的一个方法，作用是为了防止在页面加载时先出现变量名闪烁的情况，造成不好的用户体验， 例如：{{ v.name}} (闪一下)=> 张三 用法：html中：<h1v-cloak>{{ v.name }} </h1> 　　　css中：[ v-cloak ] { 　　　　　　　display:none 　　　　　　　} ...
vue学习之路
weixin_44866659的博客
07-15 211
vue.js学习之路（1）此篇博客开始记录vue框架的学习之路，在此分享记录自己的前端学习历程1.vue.js的引入2.MVVM前端视图分层结构3.基本指令 此篇博客开始记录vue框架的学习之路，在此分享记录自己的前端学习历程 1.vue.js的引入 还是直接通过<script`>标签的src属性引入vue.js文件，js文件在vue的官网下载 2.MVVM前端视图分层结构 1)V:视...
vue 的v-cloak
04-02
在使用v-cloak指令后，只有在Vue实例编译完成后，才会显示指令所在的元素。 v-cloak指令的使用方法： 1.在CSS中定义一个样式： [v-cloak] { display: none; } 2.在HTML中使用v-cloak指令： <div v-cloak> {{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值