vue 第六天（条件判断）

刺骨的言语ヽ痛彻心扉 2022-11-04 13:25 172阅读 0赞

# vue 第六天 （条件判断） #

## 1、v-if 表达式 ##

**如果v-if里面的相等的话就执行表达式里面的**

<div id="vue_one">
        如果我是dj你还爱我吗
       <h1 v-if="dj=='爱你'">爱你</h1>
       <h1 v-if="dj=='不爱你'">不爱你</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data:{ 
                dj:'爱你',
            },
            methods: { 
            }
        })
    </script>

## 2、v-else-if 表达式 ##

**如果 v-if 里面的不相等的话就执行下一句话 v-else-if**

<div id="vue_one">
        如果我是dj你还爱我吗
       <h1 v-if="dj=='爱你'">爱你</h1>
       <h1 v-else-if="dj=='不爱你'">不爱你</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data:{ 
                dj:'爱你',
            },
            methods: { 
            }
        })
    </script>

## 3、v-else 表达式 ##

**如果 v-if 里面的不相等的话，就执行 v-else里面的**

<div id="vue_one">
        如果我是dj你还爱我吗
       <h1 v-if="dj=='爱你'">爱你</h1>
       <h1 v-else="dj=='不爱你'">不爱你</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data:{ 
                dj:'不爱你',
            },
            methods: { 
            }
        })
    </script>

## 4、v-if v-else-if v-else 表达式 ##

<div id="vue_one">
       <h1 v-if="score <= 60">你的成绩为C</h1>
       <h1 v-else-if="score <= 70">你的成绩为B</h1>
       <h1 v-else-if="score <= 80">你的成绩为A</h1>
       <h1 v-else="">你的成绩为S</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data:{ 
                score:130,
            },
            methods: { 
            }
        })
    </script>

## 5、v-show 表达式 ##

**v-show 相当于 style 样式中的 display:none 属性**

<div id="vue_one">
        <h1 v-show="xs">我为true时候显示，否则我是隐藏的none</h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data:{ 
                xs:true,
            },
            methods: { 
            }
        })
    </script>

`花开一千年,花落一千年,花叶永不见`