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

Stack overflow at line 错误原因

Stack overflow at line 错误原因场景：点击页面上一个超链接，弹出模态窗口。

全栈程序员-站长
2022年7月15日
21
rap韵脚大全（包含各种诗词歌曲的韵脚等）

rap韵脚大全（包含各种诗词歌曲的韵脚等）rap韵脚（a篇）Ba：八，疤，叭，芭，把，吧，爸，罢，巴，扒，坝，霸，靶，笆，捌，拔，跋，钯，耙Ca：擦，嚓Cha：查，插，叉，茶，差，杈，岔，衩，刹，诧，姹Da：大，答，达，打，搭，嗒，哒，耷，褡，瘩，鞑，靼Fa：发，法，罚，伐，乏，阀，筏，疺Ga：尬，伽，嘎，旮Ha：哈Ka：卡，咖，喀La：拉，啦，辣，蜡，腊，喇，垃Ma：吗，妈，马，嘛，麻，骂，码，玛Na：那，拿，…

全栈程序员-站长
2022年6月18日
141
grep 命令详解_grep命令详解

grep 命令详解_grep命令详解一:grep命令的基本概念和用途grep命令是linux中一种强大的文本搜索工具，它能使用正则表达式搜索文本，并把匹配的行打印出来。在一个或多个文件中搜素字符串模式，如果字符串模式包括空格，也必须被引用，模式后的所有字符串被看作文件名。搜索的结果被送到标准输出（stdout)，不影响原文件内容。grep也可以用于shell脚本，因为grep通过返回一个状态值来说明搜索的结果，如果模式搜索成功，则返回0；如果搜索不成功，则返回1；如果搜索的文件不存在，则返回2；我们利用这些返回值就可以进行一些自动化的文

全栈程序员-站长
2022年8月30日
5
什么是信息熵?香农利用信息熵回答了什么问题_香农定律

什么是信息熵?香农利用信息熵回答了什么问题_香农定律第九个知识点：香农(Shannon)定义的熵和信息是什么这是计算机理论的最后一篇.我们讨论信息理论的基础概念,什么是香农定义的熵和信息.信息论在1948年被ClaudeE.Shannon建立.信

全栈程序员-站长
2022年8月4日
6
【Android】 RecyclerView、ListView实现单选列表的优雅之路.

【Android】 RecyclerView、ListView实现单选列表的优雅之路.转载请标明出处：http://blog.csdn.net/zxt0601/article/details/52703280本文出自:【张旭童的博客】一概述：这篇文章需求来源还是比较简单的，但做的优雅仍有值得挖掘的地方。需求来源：一个类似饿了么这种电商优惠券的选择界面：其实就是一个普通的列表，实现了单选功能，效果如图:（不要怪图渣了，我撸了四五遍，公司录出来的GIF就这么

全栈程序员-站长
2022年5月30日
33
Python之struct

1.功能（1）按照指定格式将Python数据转换为字符串(该字符串为字节流)（2）按照指定格式将字节流转换为Python指定的数据类型（3）处理二进制数据，如果用struct来处理文件的

全栈程序员-站长
2021年12月18日
54

发表回复

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