Solve the problem that the {{message}} reference interface is displayed due to delay

I found a problem when writing applications using Vue. Whenever I enter some delayed operations (such as network API requests), I will first flash the uncompiled Mustache tag {{ message }}, which is very unpleasant.

The solution was found on the official website:v-cloak

Refer to the official website practice:

Define the style of [v-cloak]

<style>
 [v-cloak] {
  display: none;
 }
</style>

Add v-cloak where Mustache tag is used

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

This way, Vue can hide uncompiled Mustache tags until the instance is ready. The actual test results are great.

The above article solves the problem of the quotation interface due to delay displaying the {{message}}. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.