vue 显隐操作

操作"/>

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一样