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

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


了解详情 >

第十一课 模板中使用条件判断

模板中使用条件判断,控制页面的样式,是最常见的应用。Vue中提供了两种基本的方法,一种是三元运算符,另一种就是v-if

三元运算符控制模板样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo11</title>
<script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: 'baidu.com',
}
},
methods: {
handleItemClick() {
this.message = this.message == 'baidu.com' ? "百度" : "baidu.com"
}
},
template: `<h2 >{{message}}</h2>`

})
const vm = app.mount("#app")
</script>
</html>

这就是一个最简单的Vue代码了,然后我们在<script>标签下面,写一段style样式代码。

1
2
3
4
<style>
.one {color: red;}
.two {color: green;}
</style>

这里有两个基本的CSS样式,分别是让文字是红色和绿色。现在的需求是,要根据message的值显示不同的颜色,是baidu.com显示红色,是百度时显示绿色。类似这样的需求,就可以使用三元运算符,然后绑定class的形式。

1
2
3
4
5
template: `<h2 
:class="message=='baidu.com'?'one':'two'"
@click="handleItemClick" >
{{message}}
</h2>`

这时候文字变化,对应的css样式也会变化。可以打开浏览器,看一下效果。

v-if判断

三元运算符的限制还是比较明显的,就是只能判断两个值,如果这时候我们再加入一个值,就是既不是baidu.com,也不是百度的时候,我们显示橙色。这时候三元运算符就满足不了需求了。vue给我们准备了v-if判断。

1
2
3
4
5
<style>
.one {color: red;}
.two {color: green;}
.three{color:orange;}
</style>

然后可以使用v-if来进行编写模板。

1
2
3
4
5
template: `
<h2 @click="handleItemClick" v-if="message=='baidu.com'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='百度'" class="two"> {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='bilibili'" class="three"> {{message}} </h2>
`

当然,也可以使用v-else,比如下面把代码改为这个样子。

1
2
3
4
template: `
<h2 @click="handleItemClick" v-if="message=='baidu.com'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-else class="three"> {{message}} </h2>
`

评论