In Vue , there are 2 ways to render normal text: { {}} and v-text
/* 以下两种方式都可以渲染普通文本 */
<div id="app">{
{msg}}</div>
<div id="app" v-text="msg"></div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>{ {}}
It should be noted that when using { {}} to display or update page data: when the network speed is relatively slow , there will be a bad transition phenomenon, and the user will first see our expression ( { in the above page {msg}} ), before seeing the value in data ( welcome Vue! )
This is the so-called flickering problem
A way to solve this problem:
Use the v-cloak directive, and then set the css style display:none;
In order to prevent being overridden by other high priority display:none styles. , so it's better to add another !important and set its priority to the highest
<style>
[v-cloak]{
display: none !important;
}
</style>
<body>
<div id="app" v-cloak>{
{msg}}</div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>
</body>v-text
The default v-text has no flickering problem, { {}} has a flickering problem
v-text will overwrite the original content in the element, but { {}} will only replace its own placeholder. (as follows)
<div id="app" v-cloak>￥{
{msg}}元</div>
<script>
new Vue({
el: '#app',
data: {
msg: '100'
}
})
</script>The final output result is: ￥100
<div id="app" v-text="msg">￥元</div>
<script>
new Vue({
el: '#app',
data: {
msg: '100'
}
})
</script>The final output result is: 100
The difference between { {}}, v-text and v-html
- The first two render plain text to the page , the latter output html to the page .
- Like v-text, v-html will also overwrite the original content in the element .
If there is an error in the article, please ask everyone to ask questions, I would be very grateful. If you don't understand, you can comment, and I will reply one by one.
If the article is helpful to everyone, I hope you can give it a thumbs up and encourage it. There will be a long way to go to work together in the future, and the road will be long and difficult.