1、v-cloak: 标签属性能够解决插值表达式闪烁的问题,在style标签内设置[v-cloak]{display:none;}
<p v-cloak>{{msg}}</p>
<!-- 样式 -->
<style>
[v-cloak]{ display: none;}
</style>
2、插值表达式{{ 值 }}:在html标签中使用插值表达式{{ 值 }},通过此方式可将data中的属性值以文本的形式显示在前端,插值表达式的前后都可以插入文本或者其他内容,在网页渲染时不会被覆盖,类似于占位符,同时它还有闪烁的问题需要配合v-cloak属性解决。
<p v-cloak>我会在前端显示{{msg}}我会在前端显示</p>
3、v-text=" data中的属性":v-text的作用和插值表达式的作用相似,都是用来显示data中的属性值,但是v-text与{{ 值 }} 不同的是,v-text会将之前在html标签中定义的文本覆盖掉。同时,v-text没有闪烁的问题。
<h4 v-text="msg">在前端渲染成功后我会消失</h4>
4、v-html:将data中的以html方式定义的文本,以html的方式显示在前端中,而不会显示html标签,v-html属性也会覆盖原先在html标签中定义的文本,v-html没有闪烁的问题。
<div v-html="msg2"></div>
msg: '<h1>世上无难事只怕有心人</h1>'