前端极客

【基础06】模板中使用条件判断

7/5/2021 vue3vue3基础

# 【基础06】模板中使用条件判断

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

# 三元运算符控制模板样式

我们先来看利用三元运算符来控制模板的样式，根据Data中值的不同，显示不同的样式。

<!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: '陈叔叔',
                }
            },
            methods: {
                handleItemClick() {
                    this.message = this.message == '陈叔叔' ? "uncle_chan" : "陈叔叔"
                }
            },
            template: `<h2 >{{message}}</h2>`

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

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

<style>
    .one {color: red;}
    .two {color: green;}
</style>

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

template: `<h2 
                :class="message=='陈叔叔'?'one':'two'" 
                @click="handleItemClick" >
                {{message}}
        </h2>`

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

# v-if判断

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

<style>
    .one {color: red;}
    .two {color: green;}
    .three{color:orange;}
</style>

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

template: `
<h2 @click="handleItemClick" v-if="message=='陈叔叔'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='uncle_chan'" class="two"> {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='other'"  class="three"> {{message}} </h2>
    `

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

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

v-if 在实际的工作中使用的也是非常多的，建议多写两次，加深一下印象。