大家好，又见面了，我是你们的朋友全栈君。
概述
我们在学习vue的过程中，对指令的学习是必不可少的，下面结合自己工作和学习的一点经验介绍下vue中插值表达式，v-text和v-html三者的区别
插值表达式
我们知道页面的加载时自上而下的，js加载是同步的。当页面刷新比较频繁或者网上较慢的时候，我们使用插值表达式页面会先出现‘{
{message}}’，再用真实数据替换‘{
{message}}’(模拟这种现象可以将vue.js的引入放在body的后面，或者调整网络请求的速度为3G)![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/f49ae22a-2bcb-425b-bec7-57acc1a2250020220613f2a12699-065a-42df-99ab-b81e7fcf6fe01.jpg)
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/f553608f-3aba-4937-a9b2-c178b7178aeb202206130fb65370-7494-4a40-83f5-8d20482310ab1.jpg)
解决上述问题的办法v-cloak,这个指令可以隐藏未编译的标签直到实例准备完毕。不会显示，直到编译结束。
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/5e3dca70-dcc5-4318-9411-a26932d9b087202206134dc1fd38-8bcc-4636-b583-5a503de6d37b1.jpg)
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/b3f8ffb9-7fa9-46ed-8b3a-654515cb97bc20220613b74209ce-78bf-4d28-9705-c58d3cad44091.jpg)
v-text
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/ab7291c6-92e7-4ee0-851c-d68f0250749a20220613989cb133-6328-4901-b6ca-74c5301a45e71.jpg)
显示效果与插值表达式一样，并且还不会出现‘{
{message}}’闪烁现象，那么就有同学么要问有了v-text为什么还要插值表达式？通过下面代码为大家讲述两者区别：
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/a538764c-fb90-4a52-8174-180e5d1013fe20220613c1139a53-dc8b-4cff-9344-3c9b09938d511.jpg)
运行结果：
结论：插值表达式相当于一个占位符，只会替换掉其中的占位置的内容，v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。
v-html
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/ae201bee-f11b-40bc-bf56-badd039ea85f2022061303454b50-7072-4da9-84ee-2b617d18da0a1.jpg)
![Vue中插值表达式,v-text和v-html三者区别[通俗易懂]](http://qn.javajgs.com/20220613/241748a9-6d85-4de0-8e60-fd50cdca4cd0202206134aae76bc-50a2-4902-b8d6-3cd30f4568851.jpg)
运行结果：
结论：插值表达式和v-text不能够解析html标签，v-html能够解析html标签
总结
1、如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。
2、如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-cloak”属性一起使用（同时需要设置样式[v-cloak]{display:none;}）。
3、如果Vue对象传递过来的数据含有HTML标签，则使用v-html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/147169.html原文链接：https://javaforall.net
