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>