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 模板方面的语法就基本结束了。

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 11. [基础]模板中使用v-if条件判断

发表回复