Vue条件判断语句

1.v-if的使用
删除或创建元素

<div id="app">
    <h2 v-if="isShow">{{messgae}}</h2>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
        message:'你好呀'
    }
})
</script>

2.v-else的使用

<div id="app">
   <h2 v-if="isShow">{{messgae}}</h2>
   <h2 v-else>否则显示我</h2>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
        message:'你好呀'，
        isShow:true
    }
})
</script>

3.v-if和v-else-if的使用

<div id="app">
    <h1 v-if="score>=90">优秀</h1>
    <h1 v-else-if="score>=80">良好</h1>
    <h1 v-else>良好以下</h1>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
        score:99
    }
})
</script>

4.v-show
更改style 只是隐藏了 切换频率高用这个

<div id="app">
    <h2 v-show="isShow">{{messgae}}</h2>
</div>
</body>
<script>
const app = new  Vue({
    el:"#app",
    data:{
        message:'你好呀'
    }
})
</script>