vue 第六天（条件判断）

vue 第六天 （条件判断）

1、v-if 表达式

如果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

<!-- 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里面的

<!-- 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 表达式

<!-- 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 属性

<!-- v-show 表达式-->
<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>

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