How to solve the problem that when Vue.js displays data, the page flashes

Below I will share with you an article that solves the problem of the original code flashing on the page when using Vue.js to display data. It has a good reference value and I hope it will be helpful to everyone.

I started learning how to use Vue.js today, but I found a problem during the learning process, that is, when the page loads data, the original code will flash. Check the information from all parties and find the final solution.

The first step is to add a piece of css code

<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style>

The second step is to reference the css module on the view

<p id="app" v-cloak> 
  <h1 id="message">{{message}}</h1> 
  <h1 id="name">{{name}}</h1> 
</p>

Note that some articles say to add v-cloak in the specific data part, but this is too troublesome. Every data display must be added, so load it directly. On the large view module, the problem can be solved.

The third step, the js part has not changed

<script type="text/javascript">   
  var exeData = { 
    message : "Hello World", 
    name:"我是Vue" 
  }; 
 
  new Vue({ 
    el : "#app", 
    data : exeData 
  }) 
</script>

Paste the complete code below :

 
 
 
 
 
<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style> 
 
 
   
  
 
    
{{message}}
 
    
{{name}}
 
  
 
 
 
 

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solve the problem that hot deployment cannot detect file changes in Webpack

Hot occurs in Webpack dev server Loading failure problem

Implementing remote access configuration method in webpack-dev-server

The above is the detailed content of How to solve the problem that when Vue.js displays data, the page flashes. For more information, please follow other related articles on the PHP Chinese website!