vue 显隐操作

vue 显隐操作

1、v-if 实现显隐

（1）、显示

<template>
    <div>
        <button @click="btn">显示</button>
        <h1 v-if="if_show">点击显示之后显示的内容</h1>
    </div>
</template>

<script>
    expert default{
        data(){
            return{
                if_show：false，
            }
        },
        methods:{
            btn(){
                this.if_show = true;
            }
        }
    }
</script>

<style scope>
</style>

（2）、隐藏

<template>
    <div>
        <button @click="btn">隐藏</button>
        <h1 v-if="if_show">点击隐藏之后，需要隐藏的内容</h1>
    </div>
</template>

<script>
    expert default{
        data(){
            return{
                if_show：true，
            }
        },
        methods:{
            btn(){
                this.if_show = false;
            }
        }
    }
</script>

<style scope>
</style>

（3）、显隐

<template>
    <div>
        <button @click="btn">隐藏</button>
        <h1 v-if="if_show">点击隐藏之后，需要隐藏的内容</h1>
    </div>
</template>

<script>
    expert default{
        data(){
            return{
                if_show：true，
            }
        },
        methods:{
            btn(){
                this.if_show = !this.if_show;
            }
        }
    }
</script>

<style scope>
</style>

v-showd的显隐操作和v-if一样