Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)_插值表达式 - CSDN文库

1.2k 浏览量更新于2023-05-27 评论收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue的数据渲染语法和指令的数据渲染语法和指令(插值表达式、插值表达式、v-cloak、、v-text、、v-

html)

在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍：

一、插值表达式一、插值表达式

插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义：

通过Vue提供的指令即可很方便地将数据渲染到页面上无需手动操作DOM元素了

{{msg}}

var vm=new Vue({

el:"#app",

data:{

msg:"Hello Vue!"

}

})

由于插值表达式的语法是{{}} 因而也被称为mustache胡子表达式

二、二、v-clock

插值表达式存在闪烁的问题

在网速卡的情况下加载插值表达式时页面会显示{{xxx}} 当页面加载好了才会显示内容影响美观

此时可添加v-cloak属性以解决插值表达式{{}}闪烁的问题

{{msg}}

然后给v-clock添加一个css样式即可：

[v-cloak] {

display: none;

}

这样在网速卡的情况下插值表达式不会被显示出来会被display:none隐藏等页面加载完了直接显示内容

三、三、v-text

v-text的效果和{{}}插值表达式差不多都是显示数据

var vm=new Vue({

el:"#app",

data:{

msg:"Hello Vue!"

}

})

v-text和插值表达式的区别是：

v-text不会有闪烁问题不会有闪烁问题

因为并没有在里面写表达式而是加在属性里

但插值表达式也有其优点：

插值表达式可以在前后加上任意内容插值表达式可以在前后加上任意内容：

例如：

---{{msg}}---

因为插值表达式只会替换自己的占位符不会影响其它内容

而v-text会覆盖覆盖元素中原本的内容

四、四、v-html

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38744375

粉丝: 371
资源: 2万+

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈