The difference between vue interpolation expression and v text instruction
- 2021-12-09 08:17:44
- OfStack
{{message}}
Syntax can only be used in tag content
{{}}
This syntax is called interpolation expression, in which any legal js expression can be written
1. Using plug-in expressions
With plug-in expressions, there is a content flicker problem, but v-text has no flicker problem
<div id="app">
<p>
{{message}}
</p>
<p v-text="message"></p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>
In the above code, if the output is normal, the result is 1.
However, if the network speed is slow, the plug-in expression will be output on the page first
{{message}}
Then the page will be rendered normally, which is not good enough for the user experience.
2. Use v-cloak in plug-in expressions to solve flicker problems
<style>
[v-cloak]:{
display:none;
}
</style>
<div id="app">
<p v-cloak>
{{message}}
</p>
<p v-text="message"></p>
</div>
<script src="./js/vue.js"></script>
We can use
v-cloak
Property is hidden at run time, but because at the end of run,
vue
Will be automatically deleted
v-cloak
Attribute
So the flicker problem can be solved in this way
3. Plug-in expressions
Plug-in expressions only insert content and do not overwrite the original content, while
v-text
Will overwrite the original content
<div id="app">
<p>
----{{message}}----
</p>
// ----hello vue----
<p v-text="message">1234556</p>
// hello vue
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>