v-cloak 在 vue.js 中不起作用? [英] v-cloak does not work in vue.js?

问题描述

我的页面中有一个 div 用于显示错误消息.当我刷新页面时，它会出现一段时间然后消失.我添加了 v-cloak 但它不起作用.

这是代码，showErrorMsg 是假的

<a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a><p v-text="errorMsg"></p>

如何解决这个问题?

解决方案

我通过重写 css 解决了这个问题

在css文件中添加一个类:

[v-cloak] .v-cloak--hidden{显示:无；}

然后是 html:

<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden"><a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a><p v-text="errorMsg"></p>

There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but it doesn't work.

this is the code, showErrorMsg is false

<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
  <a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

How to fix this?

解决方案

I fixed this problem by rewrite the css

add a class in css file:

[v-cloak] .v-cloak--hidden{
  display: none;
}

then the html:

<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
  <a href="#" v-on:click="showErrorMsg = false" class="del"><i>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

这篇关于v-cloak 在 vue.js 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！