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

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

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

离散数学传递闭包_传递闭包一定等于自身的是

离散数学传递闭包_传递闭包一定等于自身的是给定 n 个变量和 m 个不等式。其中 n 小于等于 26，变量分别用前 n 的大写英文字母表示。不等式之间具有传递性，即若 A>B 且 B>C，则 A>C。请从前往后遍历每对关系，每次遍历时判断：如果能够确定全部关系且无矛盾，则结束循环，输出确定的次序；如果发生矛盾，则结束循环，输出有矛盾；如果循环结束时没有发生上述两种情况，则输出无定解。输入格式输入包含多组测试数据。每组测试数据，第一行包含两个整数 n 和 m。接下来 m 行，每行包含一个不等式，不等式全部为小于关系

全栈程序员-站长
2022年8月9日
11
VPS磁盘划分建立新磁盘

VPS磁盘划分建立新磁盘

全栈程序员-站长
2021年11月17日
53
python安装不了whl文件_python安装.whl文件失败

python安装不了whl文件_python安装.whl文件失败原博文2017-12-2714:26−安装wheelpipinstallwheel以安装scipy为例，在官网下载安装包https://pypi.python.org/pypi/scipy一定要注意这里的版本一定要和你的python所支持的版本一直否则会出现C:\Users\xiaoqiu>pip…相关推荐2019-12-1909:59−##pip安装最简单的安装方式，自动下…

全栈程序员-站长
2022年5月9日
58
java标识符命名规范

java标识符命名规范标识符identifier命名规范作用常量、变量、方法、类和包的名称等1、标识符不能以数字开头2、必须以下划线、字母、$开头3、java中包名、类名是不区分大小写的，也就是说包名：com.wang和com.Wang是相同的包名（即只要字母相同，不区分大小写，都是相同的包名）；Aa和aA是相同的类名。这种情况小编译都会报错！！！！###但在使用命令窗口执行java类是，类名是区分大小写的：例如类名是HelloWorld的类执行时的命令是javaHelloWorld不能是jav

全栈程序员-站长
2022年7月8日
36
对“全栈工程师”一词的理解

对“全栈工程师”一词的理解纵使目标再大人的精力有限于我来说早些时候远大目标隐约是成功的软件工程师这个样子但是目标是需要逐渐细化的这些年我渐渐对自己的定位和未来有了一个清晰一点的认识确实我有很强的观点觉得软件工程师需要有足够的全面性在我眼中的工程师文化中我也说工程师文化不是只有权力的一面它对工程师的要求是每个人都要足够能干都要做许多的事但是全面性不代表没有专精没有方向深度和广度统一的问题已经有许许多多过往的人和我说过了不存在一个在某一领域精深的牛人但是知识却很窄也不存在一个

全栈程序员-站长
2025年11月21日
3
华为面试内幕[通俗易懂]

华为面试内幕[通俗易懂]华为面试内幕–写给想进华为的毕业生的话华为公司的面试过程分为5个环节：一面（技术）、二面（集体）、三面（性格测试）、四面（英语）、五面（综合）。通关者方可录用。这个流程表面上设计挺严谨的，还是某个著名公司设计的流程。但实际上华为

全栈程序员-站长
2022年7月17日
27

发表回复

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