如何利用Vue.js库中的v-show显示和隐藏元素？

Question

如何利用Vue.js库中的v-show显示和隐藏元素？

Answer 1

<h1 v-show="ok">Hello!</h1>
如果ok这个变量为真，就会显示Hello!
v-show 是简单的切换元素的 CSS 属性 display ，也就是会占用浏览器内存空间，

另外一个类似的是 v-if
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。