5、vue-条件判断 （v-if、v-else、v-else-if）

1、v-if的使用

 <div class='app'>
        <h2 v-if='isshow'>{{message}}</h2>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                isshow: false
            }
        })
    </script>

2、v-if、v-else的使用

 <div class='app'>
        <h2 v-if='isshow'>{{message}}</h2>
        <h2 v-else='isshow'>显示我</h2>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                isshow: false

            }
        })
    </script>

3、v-if、v-else、v-else-if的使用

  <div class='app'>
        <h2 v-if='score>=90'>优秀</h2>
        <h2 v-else-if='score>=70'>良好</h2>
        <h2 v-else-if='score>=60'>及格</h2>
        <h2 v-else>不及格</h2>
    </div>
    <script src='../vue.js'></script>
    <script>
        const app = new Vue({
            el: '.app',
            data: {
                message: '你好啊，世界！',
                score: 90
            }
        })
    </script>

***最后一个代码的使用，如果是判断条件复杂，还是建议写在computed属性中，然后进行调用