Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍：
一、插值表达式插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义：
通过Vue提供的指令即可很方便地将数据渲染到页面上 无需手动操作DOM元素了
Document
{{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-textv-text的效果和{{}}插值表达式差不多 都是显示数据
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
v-text和插值表达式的区别是：
v-text不会有闪烁问题
因为并没有在里面写表达式 而是加在属性里
但插值表达式也有其优点：
插值表达式可以在前后加上任意内容：
例如：
---{{msg}}---
因为插值表达式只会替换自己的占位符 不会影响其它内容
而v-text会覆盖元素中原本的内容
若要渲染HTML标签 v-text是不行的 因为v-text并不会转义Html标签
这会导致Html标签被原原本本的显示到页面上
此时 需要用到v-html：
类似于Thymeleaf的th:utext属性 会对Html标签进行转义
var vm=new Vue({
el:"#app",
data:{
msg:"Hello Vue!"
}
})
作者：Piconjo_Official
相关文章
Efia
2020-11-23
Hea
2021-04-30
Efia
2020-03-26
Claire
2021-05-21
Grizelda
2023-07-20
Janna
2023-07-20
Ophelia
2023-07-21
Crystal
2023-07-21
Laila
2023-07-21
Aine
2023-07-21
Bliss
2023-07-21
Lillian
2023-07-21
Tertia
2023-07-21
Olive
2023-07-21
Angie
2023-07-21
Ula
2023-07-21
Jacuqeline
2023-07-21
Phaedra
2023-07-22
Nora
2023-07-24