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


相关推荐

  • java.net.SocketTimeoutException: connect timed out 的解决办法

    java.net.SocketTimeoutException: connect timed out 的解决办法

    java.net.SocketTimeoutException: connect timed out 的解决办法问题概述在项目中使用FastDFSClient上传图片/文件时，一直上传失败的，报错：java.net.SocketTimeoutException:connecttimedout表示连接失败的，错误信息部分截图如下：具体信息如下：2020-03-0816:41:12,423[localhost-startStop-1-SendThread(192.168.159…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月20日
  • 分类模型评价指标_简述常用的模型评价的指标

    分类模型评价指标_简述常用的模型评价的指标

    分类模型评价指标_简述常用的模型评价的指标在分类型模型评判的指标中，常见的方法有如下三种：混淆矩阵（也称误差矩阵，ConfusionMatrix） ROC曲线 AUC面积混淆矩阵是ROC曲线绘制的基础，同时它也是衡量分类型模型准确度中最基本，最直观，计算最简单的方法。一句话解释：混淆矩阵就是分别统计分类模型归错类，归对类的观测值个数，然后把结果放在一个表里展示出来。这个表就是混淆矩阵。ROC是一条线，如果我们选择用…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月5日
  • Grid布局

    Grid布局

    Grid布局

    全栈程序员-站长的头像 全栈程序员-站长
    2021年7月7日
  • SSR服务器端渲染(Next.js总结和豆瓣电影项目)「建议收藏」

    SSR服务器端渲染(Next.js总结和豆瓣电影项目)「建议收藏」

    SSR服务器端渲染(Next.js总结和豆瓣电影项目)「建议收藏」一.前言先解释一下Nuxt.js和Next.js虽然只有一个字母之差,但它们是不同的两个服务端渲染框架.什么是Next.js?引用Next中文官网的一句话:Next.js是一个轻量级的React服务端渲染应用框架。Next.js带来了很多好的特性：默认服务端渲染模式，以文件系统为基础的客户端路由(注意:没有专门路由)代码自动分割使页面加载更快以webpack的热替换（HMR…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月31日
  • 小波阈值去噪

    小波阈值去噪

    小波阈值去噪目录1.概念2.原理3.影响降噪效果的因素3.1小波基的选择3.2分解层数的选择3.3阈值的选择3.4阈值函数的选择4.MATLAB代码参考文献1.概念小波分析即用Mallat塔式算法对信号进行降阶分解。该算法在每尺度下将信号分解成近似分量与细节分量。近似分量表示信号的高尺度，即低频信息；细节分量表示信号的低尺度，即高频信息。对含有噪声的信号，噪声分量的主要能量集中在小波分解的细节分量中。2.原理小波阈值去噪的实质为抑制信号中无用部分、增强有用部分的过

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月16日
  • 想发表文章在哪里发表_微信朋友圈怎么弄的置顶文字

    想发表文章在哪里发表_微信朋友圈怎么弄的置顶文字

    想发表文章在哪里发表_微信朋友圈怎么弄的置顶文字  因为博客中的文章已经越来越来了，为了便于文章检索，特整理本文，欢迎收藏!!!Java核心1.JDK8新特性Lambda表达式讲解接口新特性函数式接口方法引用Stream流Optional工具类介绍新的日期时间工具类介绍注解的增强2.Java核心Java集合核心内容之数组和链表Java集合核心内容之二叉树2-3-4树详解红黑树详解精讲红黑树删除操作剖析反射的本质3.设计模式3.1创建型模式  都是用来帮助我们创建对象的！模式地址单例模式ht

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月2日

发表回复

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

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