抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

第九课 插值表达式和v-bind数据绑定

这节课主要学习两个模板语法:插值表达式和v-bind的使用。

插值表达式是什么

就是我们经常看到的{{xxxx}}这样的东西。利用这种形式,可以使用data中的变量,展示在模板中。

插值表达式输出html标签-v-html指令

如果我想在变量里,编写一些html的标签,然后输出展现在页面中,这时候会出现点小问题。我们先修改代码,看看问题所在。例如在message中加入<i>标签。

1
2
3
return {
message: '<i>www.baidu.com</i>'
}

这时候如果什么都不做,直接输出,你在浏览器中看到的结果就是下面的样子。

1
<i>www.baidu.com</i>

这并不是你想要的结果,这时候需要使用v-html的标签解决这个问题。把template属性的部分改成下面的样子。需要注意的是这压力要改成”`”符号,否则不能使用双引号这种形式

1
template: `<h2 v-html="message"> </h2>`

插值表达式只作一次渲染-v-once

现在这种插值表达式,是跟着data中的数据一起变化的,也就是我们常说的数据双向绑定。但是如果我希望一个插值表达式,只有在第一次渲染去data中的值,而以后不再跟随data变化,这时候就要用到v-once指令。
先来看一下目前这种代码,我们为h2标签,加入相应事件handleItemClick,代码如下。

1
template: `<h2 v-on:click="handleItemClick" v-html="message"> </h2>`

这时候在浏览器中可以看到,我们每点击一次h2标签,message的值都是变化的。再改写一下代码。

1
2
3
4
5
template: `<h2 
v-on:click="handleItemClick"
v-html="message"
v-once
> </h2>`

加入了v-once后,无论data中的数据如何变化,模板也不会再次重新渲染了,这就是v-once的变化。

插值表达式中是可以用JS表达式的

最常用的表达式是三元运算符。比如下面这样的代码也是可以的。比如在data中新声明一个变量count,用三元运算符判断是否是大于2,如果大于2显示大,小于2显示小,编写代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
const app = Vue.createApp({
data() {
return {
message: '<i>www.baidu.com</i>',
count: 5
}
},
methods: {
handleItemClick() {
this.message = this.message == 'www.baidu.com' ? "百度" : "www.baidu.com"
}
},
template: `<h2
v-on:click="handleItemClick"
v-html="message"
v-once
> </h2>
<div>{{count>2?'大':'小'}}</div>
`
})
const vm = app.mount("#app")

</script>

当然你也可以使用一些简单的表达式,比如下面这些样子的JS表达式.

1
2
<div>{{'www.baidu'+'.com'}}</div>
<div>{{1+2}}</div>

这些形式的表达式都是可以的,但是如果你想用if语句,就是不可以的,因为只能用JS表达式而不能用语句。

v-bind指令的使用

现在我们给h2标签加入一个title属性,属性的值也想使用message。代码如下:

1
2
3
4
5
6
<h2 
v-on:click="handleItemClick"
v-html="message"
v-once
title="message"
> </h2>`

这时候浏览器中鼠标放上时显示的确实message这个单词,而并没有出现我们想要的结果。这时候就可以使用v-bind标签了。写成下面的样式就可以了。

1
v-bind:title="message"

评论