1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 38

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

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2022年6月13日 下午9:46
下一篇 2022年6月13日 下午10:00


相关推荐

  • vmware 桥接模式下与虚拟机互ping不通问题-终极解决办法

    vmware 桥接模式下与虚拟机互ping不通问题-终极解决办法

    vmware 桥接模式下与虚拟机互ping不通问题-终极解决办法寻寻觅觅 在百度找了好几个月 一直没有解决 你没有看错 确实是好几个月 最终 google 了十分钟不到解决了本文目的 解决 ping 不通桥接虚拟机的问题废话不多说 先说解决办法 1 防火墙禁 ping 导致 关闭虚拟机 物理主机防火墙再试一下即可 或开启 icmp 访问 2 桥接的物理网卡不对解决办法选中桥接模式 更改下面的 桥接到 默认为 自动 改为自

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月20日
    3
  • IDEA集成git和使用步骤 idea

    IDEA集成git和使用步骤

    IDEA集成git和使用步骤一 IDEA 集成 git 方法 nbsp nbsp nbsp 首先 idea 集成 git 我们需要先下载一个小软件 gitbash nbsp 地址 https git scm com downloads nbsp 下载好了之后直接下一步下一步傻瓜试安装 安装好后回在你指定的文件夹下有个 git 文件夹 文件结构如下 当然如果你对 git 命令比较熟悉 用这个软件就可以实现所有的 git 操作了 下面我们来集成进 IDEA 开发工具 打开 I

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月20日
    5
  • pip 卸载包失败的文件夹处理

    pip 卸载包失败的文件夹处理

    pip 卸载包失败的文件夹处理在用 pip 卸载 Django 相关的模块时 由于操作不当 造成异常 结果再次执行 piplist 时 发现如下结果通过 pip 尝试了半天 对于这些异常的列表信息无法处理 最后 在相应的包安装目录下 本例为 C ProgramFiles Python37 Lib site packages 查看到如下情况将所有有前缀的文件夹 除了 pycache 文件夹 删除 重新执行 pip

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月18日
    2
  • Excel字符串截取函数纪要

    Excel字符串截取函数纪要

    Excel字符串截取函数纪要LEFT A2 6 表示 截取 A 列第二行数据前六个字符串 RIGHT A2 6 表示 汲取 A 列第二行数据后六位字符串

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月19日
    2
  • JVM之内存结构详解

    JVM之内存结构详解

    JVM之内存结构详解对于开发人员来说，如果不了解Java的JVM，那真的是很难写得一手好代码，很难查得一手好bug。同时，JVM也是面试环节的中重灾区。今天开始，《JVM详解》系列开启，带大家深入了解JVM相关知识。我们不能为了面试而面试，但是学习会这些核心知识你必定会成为面试与工作中“最亮的一颗星”。本系列首发于微信公众号“程序新视界”。下面，开启我们的第一篇文章《JVM之内存结构详解》。学习也是要讲究方式方法…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月11日
    26
  • DDR3基础详解

    DDR3基础详解

    DDR3基础详解DDR3 基础详解最近在 IMX6 平台下做 DDR3 的测试接口开发 以前在学习嵌入式时 用的是官方源码 没有做过多的研究 此时需要仔细研究 DDR3 的引脚与时序 此篇是我在学习 DDR3 做的归纳与总结 其中有大部分内容是借鉴他人的博客 大部分博客的链接我已经贴出来了 如果存在版权或知识错误请直接联系我 PS 本着知识共享的原则 此篇博客可以随意转载 不过请标明出处 虽然大部分内容不是我写的 但是整理也挺累的 一 专有名词索引表名称缩写名称含义名称描述 RAS 行地址选通脉冲 Ro

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月19日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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