vue-if和show

<template>
    <div>
        <div v-if="flag">今晚要上课</div> <div v-else> 今晚不上课</div>

<button @click="flag=!flag">切换</button>
<p>------------------------------------</p>
        <div v-show="flag"> 今晚讲vue</div>
        <div v-show="!flag"> 今晚不讲vue</div>

    </div>
</template>
<script>

export default{
    name:"ifAndShow",
    data(){
        return {
            flag:true,
        }
    }
}
</script>
<style scoped>
</style>

v-if进行dom的删除和插入，v-show，通过样式进行隐藏