本文共 402 字，大约阅读时间需要 1 分钟。

条件渲染指令

1. v-if 和 v-else 及 v-else-if

条件渲染的核心指令之一，确保在切换过程中条件块内的事件监听器和子组件能够被正确销毁和重建。这种方式适用于需要完全替换DOM结构的场景。

2. v-show

基于CSS的条件渲染方式，元素会被渲染但仅通过CSS进行切换，适合需要频繁切换视觉状态但不需要进行DOM结构替换的场景。

```vue// template

```vue

通过上述代码可以看出，v-if会完全替换DOM结构，而v-show则仅通过简单的CSS切换实现

通过flag的切换，可以实现条件内容的显示和隐藏

这种方式在性能优化和用户体验上都有各自的优势

转载地址：http://bejv.baihongyu.com/