Vue中插值表达式,v-text和v-html三者区别

概述

我们在学习vue的过程中，对指令的学习是必不可少的，下面结合自己工作和学习的一点经验介绍下vue中插值表达式，v-text和v-html三者的区别

插值表达式

我们知道页面的加载时自上而下的，js加载是同步的。当页面刷新比较频繁或者网上较慢的时候，我们使用插值表达式页面会先出现‘{{message}}’，再用真实数据替换‘{{message}}’(模拟这种现象可以将vue.js的引入放在body的后面，或者调整网络请求的速度为3G)


解决上述问题的办法v-cloak,这个指令可以隐藏未编译的标签直到实例准备完毕。不会显示，直到编译结束。


此时我们去访问页面时候不再会出现‘{{message}}’，当Vue数据传递完成时，会正确显示数据。

v-text

显示效果与插值表达式一样，并且还不会出现‘{{message}}’闪烁现象，那么就有同学就要问有了v-text为什么还要插值表达式？通过下面代码为大家讲述两者区别：

运行结果：

结论：插值表达式相当于一个占位符，只会替换掉其中的占位置的内容，v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。

v-html

运行结果：

结论：插值表达式和v-text不能够解析html标签，v-html能够解析html标签

总结

1. 如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。
2. 如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-cloak”属性一起使用（同时需要设置样式[v-cloak]{display:none;}）。
3. 如果Vue对象传递过来的数据含有HTML标签，则使用v-html