vue Solution to prevent curly braces from being seen when the page loads

  • 2021-09-16 06:06:27
  • OfStack

As shown below:


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

v-cloak v-text v-html

v-cloak for large segments

v-text for single tag

v-html for processing with tags

Additional knowledge: vue curly brace data binding unsuccessful issues

I won't talk too much nonsense, let's look at the case directly ~


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!-- Introduce vue-->
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script><!-- Introduce main-->
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>

  </body>
</html>

main. js, shown in the following figure, contains only message information and is bound to div where id is app.


var app=new Vue({
  el:'#app',
  data:{
    message:'hhh'
  }
})

The results show that:

{{message}}

vue. js and self-written js are both referenced in the header, and the ideal message information cannot appear.

Change the import order under 1:

First introduce vue. js-then write html content-and finally introduce your own js code. Success! The reason is not clear yet, and it will be filled in the future …


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>
  </body>
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>

Related articles: