1. 使用Mustache语法(即双大括号`{{ }}`)
1. 使用Mustache语法(即双大括号{{ }}
)
DOM:
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}}, 李**!</h2>
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
vue实例的数据:
const app = new Vue({
el: '#app',
data: {
message: 'hello,你好啊',
firstName: 'kobe',
lastName: 'bryant',
counter: 100
},
})
2. 其他的插值指令
(1)v-once
只显示第一次解析到的数据,当数据发生改变时,页面不跟着变。
<h2 v-once>{{message}}</h2>
(2)v-html
如果数据是一个HTML标签的字符串,使用v-html指令,把这个字符串解析成标签 显示到页面上。
data: {
url:"<a href='http://www.baidu.com'>百度一下</a>"
}
<h2>{{url}}</h2> <!--把a标签显示到页面上-->
<h2 v-html="url"></h2> <!--把<a href='http://www.baidu.com'>百度一下</a>这个字符串显示到页面上-->
(3)v-text
把文本放到DOM上直接展示。
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
这两种写法的效果是一样的。区别在于:v-text指令不够灵活,比如下面的演示:
<h2 v-text="message">张***</h2>
message我们定义的是“你好啊”,这样写的话,“你好啊”会把“张**”覆盖,只显示“你好啊”。
(4)v-pre
不做解析,直接显示原本的Mustache语法。
<h2 v-pre>{{message}}</h2>
(5)v-cloak
给HTML标签添加v-cloak属性后,vue解析标签的时候,如果没数据:保留v-cloak标签;如果有数据:删除v-cloak。
实现效果:配合css使用,可以做到有数据的时候显示标签,没数据的时候隐藏标签。
场景:程序实际的执行中,可能会有代码的卡顿或延迟,导致vue读取不到数据,当读取不到数据时,就会直接显示{{message}}
,当解析到数据时,又会把{{message}}
修改成数据。这样就会造成页面显示的混乱。我们希望有数据的时候显示标签,没数据的时候隐藏标签。
用法如下:
<h2 v-cloak>{{message}}</h2>
数据部分,我们使用一个定时器,模拟程序的卡顿或延迟。
setTimeout(function(){
const app = new Vue({
el:'#app',
data:{
message:'你好'
}
})
},1000)
这样写就实现了我们想要的效果:一开始没数据,v-cloak
属性保留,显示{{message}}
,后面有数据了,显示你好
,并删除了v-cloak
属性。
最后,指定css效果:
<style>
[v-cloak] {
display: none;
}
</style>
有v-cloak
属性的时候,把这个标签隐藏,至此我们想要的效果就做好了。