VUE中条件渲染指令v-if和v-show

条件渲染指令v-if和v-show

v-if和v-show的区别

如果用v-if和v-show来实现DOM元素的显示与不显示

v-if实现dom元素的删除

v-show只是内部添加display：none样式

需要频繁的使用切换，那么就用v-show

（使用了指令 v-if ， v-show ，@click ）

@click=“flag=!flag” 点击切换

<template>
    <div>
        <div v-if="flag">今天晚上出去玩</div>
        <div v-else>今天晚上不出去玩</div>
        <p></p>
        <button @click="flag=!flag">切换</button>
        <p>---------------------------------------</p>
        <div v-show="flag">现在吃饭</div>
        <div v-show="!flag">现在不吃饭</div>
    </div>

</template>

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

<style scoped>

</style>