Vue中v-show与v-if如何选择使用，以实现最佳性能和效果？

本文共计720个文字，预计阅读时间需要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 的详细描述 ，为什么不能一起使用，以下我用代码来解释一下。