11 v-if 更好颜色、三元运算符

Dear 丶 2023-10-06 20:24 4阅读 0赞

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

*  场景
 *  三元运算符控制模板样式
 *  v-if 判断

## 场景 ##

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

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

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

然后修改为下面的样子:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    
    <div id="app"></div>
    
    <script type="text/javascript">
    const app = Vue.createApp({
          
        data() {
          
            return {
          
                message:'willem'
            }
        },
        methods:{
          
            handleItemClick(){
          
                this.message = this.message == 'willem' ? 'willem笔记' : 'willem.com'
            }
        },
        template:'<h2>{
          {message}}</h2>'
    });
    const vm = app.mount('#app');
    </script>
    </body>
    </html>

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

这里有两个基本的CSS样式，分别是让文字是红色和绿色。现在的需求是，要根据`message`的值显示不同的颜色，是willem显示红色，是willem笔记时显示绿色。

类似这样的需求，就可以使用三元运算符，然后绑定class的形式。

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

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

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <script src="https://unpkg.com/vue@next"></script>
        <style>
            .one {
          color: red;}
            .two {
          color: green;}
        </style>
    </head>
    <body>
    
    <div id="app"></div>
    
    <script type="text/javascript">
    const app = Vue.createApp({
          
        data() {
          
            return {
          
                message:'willem'
            }
        },
        methods:{
          
            handleItemClick(){
          
                this.message = this.message == 'willem' ? 'willem笔记' : 'willem'
            }
        },
        template: `<h2 :class="message == 'willem' ? 'one' : 'two'"
                    @click="handleItemClick">{
           {message}}</h2>`
    });
    const vm = app.mount('#app');
    </script>
    </body>
    </html>

![在这里插入图片描述][f8790459f4a84ca7bbb25f453f99352e.gif_pic_center]

## v-if 判断 ##

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

我们先加入一个CSS样式three:

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

template: `
    <h2 @click="handleItemClick" v-if="message=='willem.com'" class="one" > {
       {message}} </h2>
    <h2 @click="handleItemClick" v-if="message=='willem笔记'" class="two"> {
       {message}} </h2>
    <h2 @click="handleItemClick" v-if="message=='bilibili'"  class="three"> {
       {message}} </h2>
    `

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

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

`v-if` 在实际的工作中使用的也是非常多的，所以建议你多写两遍，加深一下印象。这篇文章完成后，我们关于Vue模板方面的语法就基本结束了。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <script src="https://unpkg.com/vue@next"></script>
        <style>
            .one {
          color: red;}
            .two {
          color: green;}
            .three{
          color:orange;}
        </style>
    </head>
    <body>
    
    <div id="app"></div>
    
    <script type="text/javascript">
    const app = Vue.createApp({
          
        data() {
          
            return {
          
                message:'bilibili'
            }
        },
        methods:{
          
            handleItemClick(){
          
                this.message = this.message == 'willem' ? 'willem笔记' : 'willem'
            }
        },
        template: `
                <h2 @click="handleItemClick" v-if="message=='willem'" class="one" > {
           {message}} </h2>
                <h2 @click="handleItemClick" v-if="message=='willem笔记'" class="two"> {
           {message}} </h2>
                <h2 @click="handleItemClick" v-if="message=='bilibili'"  class="three"> {
           {message}} </h2>
                `
    });
    const vm = app.mount('#app');
    </script>
    </body>
    </html>

![在这里插入图片描述][387251c9c50d48d8bc36ca89a5a7fe5d.gif_pic_center]

[f8790459f4a84ca7bbb25f453f99352e.gif_pic_center]: https://img-blog.csdnimg.cn/f8790459f4a84ca7bbb25f453f99352e.gif#pic_center
[387251c9c50d48d8bc36ca89a5a7fe5d.gif_pic_center]: https://img-blog.csdnimg.cn/387251c9c50d48d8bc36ca89a5a7fe5d.gif#pic_center