Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

全栈程序员-站长 • 2022年6月13日下午9:46 • 未分类 • 阅读 34

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]概述我们在学习vue的过程中，对指令的学习是必不可少的，下面结合自己工作和学习的一点经验介绍下vue中插值表达式，v-text和v-html三者的区别插值表达式我们知道页面的加载时自上而下的，js加载是同步的。当页面刷新比较频繁或者网上较慢的时候，我们使用插值表达式页面会先出现‘{{message}}’，再用真实数据替换‘{{message}}’(模拟这种现象可以将vue.js的引…

大家好，又见面了，我是你们的朋友全栈君。

概述

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

插值表达式

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

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

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

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

v-text

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

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

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

运行结果：
在这里插入图片描述

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

v-html

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

Vue中插值表达式,v-text和v-html三者区别[通俗易懂]

运行结果：
在这里插入图片描述
结论：插值表达式和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

赞 (0)

全栈程序员-站长

0 0

关于 ioctl 的 FIONREAD 参数[通俗易懂]

关于 ioctl 的 FIONREAD 参数[通俗易懂]ioctl是用来设置硬件控制寄存器，或者读取硬件状态寄存器的数值之类的。而read,write是把数据丢入缓冲区，硬件的驱动从缓冲区读取数据一个个发送或者把接收的数据送入缓冲区。 ioctl(keyFd,FIONREAD,&b)得到缓冲区里有多少字节要被读取，然后将字节数放入b里面。接下来就可以用read了。read(keyFd,&b,sizeof(b))清

全栈程序员-站长
2022年7月23日
7
Jave运算符和MySQL运算符总结

Jave运算符和MySQL运算符总结

全栈程序员-站长
2021年7月10日
87
小米4开启太极·阳

小米4开启太极·阳机型小米4有很多版本，手中手机后面的入网许可证写着的是TD-LTE，系统设置中的名称为:MI4LTE刷入开发版Rom小米4miui官网rom地址：小米4小米4-电信3G版/移动版/联通版小米4miuirom官方下载地址：miui_MI3WMI4W_8.9.13_8001b58f3b_6.0.zip按照官方刷机教程刷入开发版rom，刷入前记得双清。获取root权限刷完rom后，打开安全中心-应用管理-权限管理-root权限开启刷入第三方recovery…

全栈程序员-站长
2022年6月4日
73
pycharm卸载不了_pycharm卸载pymysql

pycharm卸载不了_pycharm卸载pymysql本菜鸡入坑python不久。今日被lda折磨，某个动机下想要卸载lda，知识不够，后碰巧用pipunstalllda命令实现。注：本菜鸡安装时用的pipinstalllda方法。又是酸爽的填坑跳坑挖坑的一顿操作→_→。。…

全栈程序员-站长
2022年8月29日
1
C++教程(凯格尔训练法教程)

C++简介

全栈程序员-站长
2022年4月18日
43
json到底是什么(c# json)

>如果点进来的刚巧是个高手，那……你就当是过来做个鉴定的吧。很多从事数据分析工作的伙伴都是从“最简单”的神器—Excel开始入门的，对编程语言、计算机世界的很多工具都不甚了解。要做结构化的数据，就赶紧跑去自学sql，学习sqlserver或是mysql数据库。要做半结构化、非结构化的数据又得去学习诸如mongo数据库的东西。>天天听对面的程序员小哥说我给你个打包个j…

全栈程序员-站长
2022年4月16日
47

发表回复

关注全栈程序员社区公众号