1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 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


相关推荐

  • iOS 根据已知NSDictionary的value找key[通俗易懂]

    iOS 根据已知NSDictionary的value找key[通俗易懂]

    iOS 根据已知NSDictionary的value找key[通俗易懂]NSString *objectId;   NSDictionary *userDic= @{@”11″:@”aaa”,@”22″:@”fff”,@”33″:@”已知道的value”,@”44″:@”ccc”};  [userDic enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop){ 

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月23日
    5
  • Fragment 点击返回键 做返回操作

    Fragment 点击返回键 做返回操作

    Fragment 点击返回键 做返回操作

    全栈程序员-站长的头像 全栈程序员-站长
    2021年3月12日
    178
  • 自动编码器（Auto Encoder）

    自动编码器（Auto Encoder）

    自动编码器（Auto Encoder）1.初识AutoEncoder1986年Rumelhart提出自动编码器的概念，并将其用于高维复杂数据处理，促进了神经网络的发展。自编码神经网络是一种无监督学习算法，它使用了反向传播算法，并让目标值等于输入值，比如y(i)=x(i)。下图是一个自编码神经网络的示例。自动编码器(autoencoder)是神经网络的一种，该网络可以看作由两部分组成：一个编码器函数h=f(x)和一个生成

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月1日
    87
  • taskkill 使用

    taskkill 使用

    taskkill 使用TASKKILL[/Ssystem[/Uusername[/P[password]]]]{[/FIfilter][/PIDprocessid|/IMimagename]}[/F][/T]描述:这个命令行工具可用来结束至少一个进程。可以根据进程id或图像名来结束进程。参数列表:/Ssystem指定要连接到的远程系统。/U…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月29日
    0
  • ubuntu18.04 升级内核_ubuntu内核版本查看

    ubuntu18.04 升级内核_ubuntu内核版本查看

    ubuntu18.04 升级内核_ubuntu内核版本查看ubuntu18.04.4更换内核版本

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月23日
    7
  • style.cssText

    style.cssText

    style.cssText很多人用过style.color、style.display等直接设置元素的样式属性，但是style.cssText用过的人就不多了。cssText本质是什么？cssText的本质就是设置HTML元素的style属性值。cssText怎么用？复制代码代码如下:document.getElementById(“d1”).sty

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月26日
    4

发表回复

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

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