如何辨别Vue中v-show和v-if指令的适用场景？

本文共计711个文字，预计阅读时间需要3分钟。

1. `v-show` 不论初始条件是什么，元素总会被渲染，只是会根据CSS的`display: none`或`display: block`属性进行切换显示与隐藏。

2. `v-if` 会根据初始条件（`data`中自定义的数据）来决定是否渲染真实的内容。

1. v-show

不管初始的条件是什么，元素总是会被渲染，并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。

2. v-if

会根据初始的条件（data里自己的定义的数据）来进行真正的渲染（组件真正的销毁和重建），如果条件为真，才会开始渲染条件块，如果条件为假，则不会渲染条件块。

注意： v-if不要和v-for一起使用！

当和 v-for 一起使用时，v-for 的优先级比 v-if 更高，详见 vue官网关于 v-for 的详细描述 ，为什么不能一起使用，以下我用代码来解释一下。