1. 全栈程序员必看首页

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

全栈程序员-用户IM • • 未分类

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
 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/147169.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • jsonobject转map对象 fastjson_javaxml转对象

    jsonobject转map对象 fastjson_javaxml转对象

    jsonobject转map对象 fastjson_javaxml转对象1.示例代码importcom.alibaba.fastjson.JSONObject;importcom.alibaba.fastjson.TypeReference;JSONObjectobj=newJSONObject();{ obj.put(“key1″,”value1”); obj.put(“key2″,”value2”); obj.put(“key3″,”value3”);}Map<String,Integer>params=JSONO

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月23日
  • pycharm21.02 激活码【2022.01最新】2022.03.08「建议收藏」 idea

    pycharm21.02 激活码【2022.01最新】2022.03.08「建议收藏」

    (pycharm21.02 激活码)最近有小伙伴私信我，问我这边有没有免费的intellijIdea的激活码，然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢，哈哈~IntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，下面是详细链接哦~https://javaforall.cn/100143.html40…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月2日
  • executorservice和executor_secureconnector是什么软件

    executorservice和executor_secureconnector是什么软件

    executorservice和executor_secureconnector是什么软件转自:http://victorzhzh.iteye.com/blog/1010359下面是excutor相关的类结果：ExecutorService接口继承了Executor接口，定义了一些生命周期的方法publicinterfaceExecutorServiceextendsExecutor{voidshutdown();List<Runnable&gt…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月10日
  • polkitd进程解释

    polkitd进程解释

    polkitd进程解释今天想kill-9redis杀不掉然后发现这个是属于服务器方法，可以了解一下supervisor，将需要自启动的程序加入到supervisor的启动配置，只要supervisor不停止，那么监控进程就会一直运行，并且如果出现关闭情况也会被立即重启。…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月14日
  • RST文件打开_rpt文件

    RST文件打开_rpt文件

    RST文件打开_rpt文件RST与Python类似Javadoc与Java，如果下载了别人的Python源码，里面有rst文件夹，我们可以转为html后用浏览器打开，具体为：安装python的sphinx模块：pipinstallsphinx,我装的anaconda,其中已经有了，那么在cmd中进入rst的父文件夹，输入：sphinx-build-bhtmldocbuilddoc是含有rst

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月1日
  • 神兽草泥马「建议收藏」

    神兽草泥马「建议收藏」

    神兽草泥马

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年1月30日

发表回复

您的电子邮箱地址不会被公开。

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