码云学习 Vue3 2021-07-06

11. [基础]模板中使用v-if条件判断

AI 概述

模板中使用条件判断，控制页面的样式，是最常见的应用。Vue 中提供了两种基本的方法，一种是我们已经讲过的三元运算符，另一种就是v-if。三元运算符控制模板样式我们先来看利用三元运算符来控制模板的样式，根据 Data 中值的不同，显示不同的样式。这里复制Demo9.html的代码到Demo11.html中。然后修改为下面的样子: &...

模板中使用条件判断，控制页面的样式，是最常见的应用。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条件判断的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 2 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 11. [基础]模板中使用v-if条件判断

码云 SVIP

分享到：

三元运算符控制模板样式

v-if 判断

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复