css - Vuetify 忽略 v-cloak-6ren

css - Vuetify 忽略 v-cloak

转载作者：搜寻专家更新时间：2023-10-30 22:48:00

27

4

在使用 Vuetify 时，我无法避免最初的内容闪现问题。我以前在没有任何 UI 库的情况下使用 Vue 时使用通常的 v-cloak 解决方案实现了这一点，但无论出于何种原因，这不适用于 Vuetify，我仍然在 JS 出现之前得到无样式内容的闪光完成加载。

我有初始的 index.html 里面有这个(甚至试过内联 display: none):

<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak style="display: none;"></div>
    ...
</body>

然后在初始的 app.vue 文件中:

<template>
    <div id="app" v-cloak>
        <v-app v-cloak>
        ...
<style>
    [v-cloak] {
        display: none;
    }

出于某种原因，我假设 Vuetify 覆盖了内联 display: none 和多个 v-cloak。我应该如何解决此错误，以便用户在加载时不会获得初始闪存？

最佳答案

这有点晚了，但问题似乎是页面在应用所有样式之前开始呈现。要解决这个问题，您可以简单地挂载您的 View 实例onload:

import App from './components/App.vue'

const vm = new Vue({
  render: h => h(App)
})

window.onload = function() {
  vm.$mount('#app');
}

关于css - Vuetify 忽略 v-cloak，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48001190/

27

4

0

文章推荐： vue.js - Vue router 保留 iframe dom 元素(只是隐藏，不要破坏)

文章推荐： symfony - 无法从序列化数据创建 DateTime 的实例

css - [ng\:cloak] [ng-cloak] selectors (Contained in Spring Boot Security Tutorial)? 的目的是什么
我正在学习一个 spring boot 教程，它包含一个带有以下 css 的示例: [ng\:cloak], [ng-cloak], .ng-cloak { displa
javascript - AngularJS - Chromium 中按钮上的 ng-cloak 不起作用(闪烁仍然存在) - 由于某种原因，ng-cloak 甚至没有添加到 CSS
这是我的 HTML(除其他外): Add 上面的 HTML 扩展了这个 HTML 页面:
javascript - ng-cloak 无法正常工作
在我的 Angular 应用程序中，我使用显示 pdf标签。 Oops, you have no PDF viewer enabled {{tab.documentdata}
javascript - ng-cloak 是如何工作的？
我一直在看ng-cloak的源码 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngCloak.js 看起来它在
c++ - 使用 Cloaking 模式时需要虚拟析构函数吗？
如果我有以下3个类来隐藏数据类型和存储信息，我需要一个虚拟析构函数吗？我被引导相信不，但现在我不确定。出于性能原因，我宁愿不包括它。为了举例，类(class)被精简了。 #include class
dart - Angular.Dart-在Dartium中使用ng-cloak
用Angular.Dart弄湿我的脚。查看这些Exercises on GitHub 在第2章中，运行index.html时，我注意到在 mustache 被数据替换之前的经典闪烁。应用通常的'da
javascript - 预加载器 v-cloak 不显示文本加载
我有CSS: [v-cloak]::before { content: "loading…"; display: block; text-align: center; width: 300px; he
JavaScript : Cloaking redirect for posting data
我有一个由外包应用程序提供的投票系统。用户选择单选按钮的选项之一并单击“提交”按钮后，我的 JavaScript 会将他们重定向到特定的 URL(例如 http://www.poll.com/ans
javascript - 隐藏元素直到加载完成(ng-cloak 不是我需要的)
我正在编写一个 AngularJS 应用程序，但我对它很陌生，所以在下面的代码中，请指出您遇到的任何问题。我的 AngularJS 应用程序确实有这样的定义: var OfficeUIModule
javascript - AngularJS ng-Cloak 不起作用
我很绝望。我遵循了其他帖子中关于此问题的所有建议:我尝试使用 ng-cloak 或 class="ng-cloak"将此规则添加到 css [ng\:cloak], [ng-cloak], [data
javascript - 在 ng-cloak 之后执行指令函数
我的内容使用 ng-cloak 指令，我想在指令中使用 innerHeight() 获取元素高度。但是，当使用innerHeight()时，元素被ng-cloak隐藏，因此结果始终为0。我试过了
javascript - 如何调试 ng-cloak AngularJS？
我有这些图标。图标图片 icon font-awesome 图片 `` Font Awesome 注意我使用 class="ng-cloak" ` ` 这些风格 [ng\:cloak],
javascript - 如何使隐藏(ng-cloaked)元素保留其可见时占用的空间
在表格中...我使用 ng-cloak 和 ng-show 在鼠标经过该行时出现操作按钮。问题是，当图标出现时，它比不出现时占用更多空间，并且它周围的 html 会跳转。我什至将我的 css 设置
css - Vuetify 忽略 v-cloak
在使用 Vuetify 时，我无法避免最初的内容闪现问题。我以前在没有任何 UI 库的情况下使用 Vue 时使用通常的 v-cloak 解决方案实现了这一点，但无论出于何种原因，这不适用于 Vueti
javascript - 使用 ng-cloak 创建启动画面
我正在尝试使用 AngularJS 创建启动画面，如 AngularJS youtube channel 上的本次演讲所述:http://youtu.be/xOAG7Ab_Oz0?t=10m20s 它
javascript - 是否有 v-cloak 逆？
根据 VueJS documentation , v-cloak “指令可用于隐藏未编译的 mustache 绑定(bind)，直到 Vue 实例准备就绪。”。换句话说，我可以隐藏一个 div 或类似
javascript - 如何正确使用 ng-cloak 指令？
不知何故，AngularJS 中的 ng-cloak 不起作用。我想在加载页面时隐藏 {{ }}。因为它看起来很糟糕。 Angular Sample
angularjs - 什么时候不在 AngularJs 中使用 ng-cloak？
根据官方文档，关于 AngularJS (ng-cloak) 的一个查询: The ng-cloak directive is used to prevent the AngularJS HTML t
angularjs - ng-cloak 对闪烁的 Angular 代码没有任何影响
当我在下一页按住 F5 按钮时，AngularJS 变量 {{message}}和 {{titleHelp}}闪烁。我已经读过要删除这个我可以放 ng-cloak在 body 标签中。但是，这没有效
javascript - Angular JS ng-cloak 在页面加载时无法正常显示表达式符号
我是 Angular JS 的新手，我正在尝试解决某些 html 代码在评估之前显示的问题。它首先显示表达式，然后显示值。我在body中添加了ng-cloak，但是不起作用。然后，我尝试将其添加到 h

首页

博学

6Ren·AI

商城

css - Vuetify 忽略 v-cloak