Vue.js 3显示隐藏

### Vue.js 3 中实现元素显示和隐藏 在 Vue.js 3 中，可以通过条件渲染指令 `v-if` 或者 `v-show` 来控制元素的显示和隐藏。这两种方法各有特点： #### 使用 v-if 控制元素显示和隐藏 当使用 `v-if` 指令时，Vue 将根据表达式的真假来决定是否应该渲染该元素及其子节点。如果表达式为假，则整个 DOM 片段都会被移除；反之则会被插入。 ```html <div id="app"> <button @click="toggle">Toggle</button> <p v-if="isVisible">现在你可以看到这段文字。</p> </div> <script> import { ref } from 'vue'; export default { setup() { const isVisible = ref(true); function toggle() { isVisible.value = !isVisible.value; } return { isVisible, toggle }; } }; </script> ``` 此代码片段展示了如何通过点击按钮切换布尔值的状态从而达到显示或隐藏 `<p>` 标签的效果[^1]。 #### 使用 v-show 控制元素显示和隐藏 不同于 `v-if`, `v-show` 只是在 CSS 层面改变元素的可见性属性 (`display`) 而不是完全销毁/创建DOM结构。这意味着首次加载页面时无论初始状态是什么样的，所有的HTML都将存在文档流里只是可能不可见而已。 ```html <div id="app"> <button @click="toggleVisibility">Toggle Visibility</button> <p v-show="showParagraph">这是一段可以被隐藏的文字。</p> </div> <script> import { reactive, toRefs } from 'vue'; export default { setup() { let state = reactive({ showParagraph: true }); function toggleVisibility() { state.showParagraph = !state.showParagraph; } return { ...toRefs(state), toggleVisibility }; } }; </script> ``` 上述例子同样实现了点击按钮后文本框显隐的功能，但是这里采用的是 `v-show` 方式。 #### 动画效果配合过渡组件 为了使元素显现消失的过程更加平滑自然，在实际开发过程中通常会结合 Vue 提供的内置 `<transition>` 组件一起使用。这样不仅可以轻松添加进入离开动画还能支持自定义类名以便更好地定制样式变化过程中的表现形式。 ```html <template> <div class="example"> <button @click="isShow=!isShow">切换视图</button> <!-- 定义 transition --> <transition name="fade" mode="out-in"> <component :is="currentComponent"></component> </transition> </div> </template> <style scoped> /* 添加淡入淡出效果 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } .fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> <script> // 假设有两个简单的单文件组件 Home 和 About import Home from './Home.vue'; import About from './About.vue'; export default { components: { Home, About }, data(){ return{ isShow:true, currentComponent:'Home' } }, watch:{ isShow(newValue){ this.currentComponent=newValue?'Home':'About'; } } }; </script> ``` 在这个案例中，每当用户按下按钮的时候不仅能看到不同内容之间的转换还会伴随着优雅的渐变效果[^2]。