admin管理员组

文章数量:1399887

I use vue.js to display some bound variables. The skeleton of my page is

<body>
<!-- the content of the page, including an instance of the variable {{hello}} -->
<script src="vue.js"></script>
<script src="myscript.js"></script>
</body>

When opening the page, there is a brief moment where the page displays {{hello}}, which immediately after is replaced with the correct value of the variable hello.

What is the correct way (if any), to delay the displaying of the page until the variable is initialized and displays its value?

I believe it is due to Vue's asynchronous nature (the queue is not flushed yet when the first rendering happens) but I do know how to hide this not-flushed yet stage on page opening.

I use vue.js to display some bound variables. The skeleton of my page is

<body>
<!-- the content of the page, including an instance of the variable {{hello}} -->
<script src="vue.js"></script>
<script src="myscript.js"></script>
</body>

When opening the page, there is a brief moment where the page displays {{hello}}, which immediately after is replaced with the correct value of the variable hello.

What is the correct way (if any), to delay the displaying of the page until the variable is initialized and displays its value?

I believe it is due to Vue's asynchronous nature (the queue is not flushed yet when the first rendering happens) but I do know how to hide this not-flushed yet stage on page opening.

  • javascript
  • vue.js
Share Improve this question edited Jul 13, 2022 at 23:04 tony19 139k23 gold badges277 silver badges347 bronze badges asked Apr 3, 2017 at 12:23 WoJWoJ 30.1k58 gold badges214 silver badges405 bronze badges 2
  • where is the vue instance is being mounted on? – Amresh Venugopal Commented Apr 3, 2017 at 12:25
  • @AmreshVenugopal: it is being mounted on a container div, enpassing all my page – WoJ Commented Apr 3, 2017 at 12:33
Add a ment  | 

1 Answer 1

Reset to default 8

You can use v-cloak for this, Following is how this is used:

This directive will remain on the element until the associated Vue instance finishes pilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-piled mustache bindings until the Vue instance is ready.

Example: CSS:

[v-cloak] {
  display: none;
}

HTML:

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

This is very similar to ng-cloak, if you know Angular.

本文标签： javascriptHow to delay the rendering of the page until vue variables are flushedStack Overflow

版权声明：本文标题：javascript - How to delay the rendering of the page until vue variables are flushed? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744177197a2594057.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。