Vue 指令——v-cloak、v-text、v-html学习总结
v-cloak
当我们在Vue中直接使用差值表达式进行渲染数据的时候,
比如<p>{{msg}}</p>在浏览器网速很慢的时候,会先显示出来{{msg}},然后再显示出来Vue实例中msg的值,这是因为此时Vue的js文件还没有引入进来不能够对<p>{{msg}}</p>进行解析,当我们在<p>标签中加入了c-cloak如<p v-cloak>{{msg}}<p>就可以避免这种现象。
v-text
直接使用<p v-text="msg"></p>即可渲染数据并没有闪烁问题,但是msg会覆盖掉<p>标签中所有的值 如 <p v-text="msg">nihao</p>nihao会直接被msg的值覆盖掉。
v-html
当我们Vue的data为一段html代码,比如下图
此时使用上面两种方法只能将其当成字符处理,但是使用<p v-html="msg2"></p>就可以实现想要的渲染效果。