Vue 初始化时 闪烁{{}}代码

本文探讨了Vue.js中v-cloak指令的使用方法及其可能遇到的问题。当v-cloak不能有效隐藏未编译的变量时,通常是因为其display属性被其他样式覆盖。文中提供了一个解决方案,即在CSS中为v-cloak添加!important提高优先级。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?

 v-cloak 的用法:

  HTML代码:

  1. <div v-cloak>
  2. {{ message }}
  3. </div>

  CSS代码:

  1. [v-cloak] {
  2. display: none;
  3. }

这样直至div内变量编译完毕后才会显示。

但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致,我的处理方案是添加 !important ,简单粗暴。新css样式如下:

  1. [v-cloak] {
  2. display:none !important;
  3. }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值