vue 条件判断 v-if v-show

一、v-if

二、v-if v-else

 <div id="app">
        <!-- v-if -->
        <h2 v-if="isShow">{{message}}</h2>
        <h2 v-else>显示我</h2>
    </div>
   <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:"你好啊",
                isShow:false
            },
        })
    </script>

三、v-if-else 

<div id="app">
    <h2 v-if="score >= 90">优秀</h2>
    <h2 v-else-if="score >= 80">良好</h2>
    <h2 v-else-if="score >= 60">及格</h2>
    <h2 v-else>不及格</h2>
    <h1>{{result}}</h1>
</div>
<script>
        const app = new Vue({
            el:'#app',
            data:{
                score:99
            },
            computed:{
                    result(){
                        let showMessage='';
                        if(this.score >= 90){
                            showMessage ='优秀'
                        }else if(this.score >= 80){
                            showMessage ='良好'
                        }
                        return showMessage
                    }
            }
        })
    </script>