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

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)
blank

相关推荐

  • 在Android Library的Module中按渠道依赖

    在Android Library的Module中按渠道依赖

  • Android开发入门案例「建议收藏」

    Android开发入门案例「建议收藏」初次接触安卓,做出来一个还能看的案例,类似小说阅读的APP,将源码记录一下一、案例效果1.登录界面2.注册界面3.用户信息显示界面4.小说阅读界面二、安卓代码1.AndroidManifest.xml<?xmlversion=”1.0″encoding=”utf-8″?><manifestxmlns:android=”http://schemas….

  • elf格式分析

    elf格式分析

    2021年12月10日
  • 属性选择器与类选择器_input属性选择器

    属性选择器与类选择器_input属性选择器属性选择器1E[att$="val"]{sRules}选择具有att属性且属性值为以val结尾的字符串的E元素。123456910111213列表项目1

  • vue中 关于$emit的用法

    vue中 关于$emit的用法1、父组件可以使用props把数据传给子组件。2、子组件可以使用$emit触发父组件的自定义事件。vm.$emit(event,arg)//触发当前实例上的事件vm.$on(event,fn);//监听event事件后运行fn;例如:子组件:<template><divclass=”train-city”>&l………

  • ROC曲线及AUC值[通俗易懂]

    ROC曲线及AUC值[通俗易懂]ROC曲线参考文献:【ROC曲线与AUC值】1.介绍及引入ROC的全名叫做ReceiverOperatingCharacteristic,其主要分析工具是一个画在二维平面上的曲线——ROCcurve。平面的横坐标是falsepositiverate(FPR),即假阳性率(1−Sp1-Sp1−Sp);纵坐标是truepositiverate(TPR),即真阳性率(SnSnSn)。对某个分类器而言,我们可以根据其在测试样本上的表现得到一个TPR和FPR点对。这样,此分类器就可以映射成

发表回复

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

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