11. [基础]模板中使用v-if条件判断
模板中使用条件判断,控制页面的样式,是最常见的应用。Vue 中提供了两种基本的方法,一种是我们已经讲过的三元运算符,另一种就是v-if
。
三元运算符控制模板样式
我们先来看利用三元运算符来控制模板的样式,根据 Data 中值的不同,显示不同的样式。这里复制Demo9.html
的代码到Demo11.html
中。
然后修改为下面的样子:
<!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: 'mybj123.com', } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "码云笔记" : "mybj123.com" } }, template: `<h2 >{{message}}</h2>` }) const vm = app.mount("#app") </script> </html>
这就是一个最简单的 Vue 代码了,然后我们在<script>
标签下面,写一段style
样式代码。
<style> .one {color: red;} .two {color: green;} </style>
这里有两个基本的 CSS 样式,分别是让文字是红色和绿色。现在的需求是,要根据message
的值显示不同的颜色,是mybj123.com
显示红色,是码云笔记
时显示绿色。类似这样的需求,就可以使用三元运算符,然后绑定 class 的形式。
template: `<h2 :class="message == 'mybj123.com'? 'one' : 'two'" @click="handleItemClick">{{message}}</h2>`
这时候文字变化,对应的 css 样式也会变化。可以打开浏览器,看一下效果。
v-if 判断
三元运算符的限制还是比较明显的,就是只能判断两个值,如果这时候我们再加入一个值,就是既不是mybj123.com
,也不是码云笔记
的时候,我们显示橙色,这时候三元运算符就满足不了需求了,还好 vue 给我们准备了v-if
判断。
我们先加入一个 CSS 样式three
:
<style> .one {color: red;} .two {color: green;} .three{color:orange;} </style>
然后可以使用v-if
来进行编写模板。
template: ` <h2 @click="handleItemClick" v-if="message=='mybj123.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
,比如下面把代码改为这个样子。
template: ` <h2 @click="handleItemClick" v-if="message=='mybj123.com'" class="one" > {{message}} </h2> <h2 @click="handleItemClick" v-else class="three"> {{message}} </h2> `
v-if
在实际的工作中使用的也是非常多的,所以建议你多写两遍,加深一下印象。这篇文章完成后,我们关于 Vue 模板方面的语法就基本结束了。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 11. [基础]模板中使用v-if条件判断
码云笔记 » 11. [基础]模板中使用v-if条件判断