前言
在前端开发中，表单是不可缺少的一部分，它帮助我们收集到用户的信息，达到交互的效果。然而有一些情况比如需要异步上传文件，这时候我们需要在不刷新页面的情况下实现文件上传，这时候可以把表单隐藏起来，从而实现局部刷新。
那么在Vue中如何去实现隐藏表单的功能呢？本文将介绍三种方法，分别是v-show、v-if、computed。三者的实现原理略有不同，具体请看下文。
- 使用v-show指令
v-show指令在渲染DOM时，仅仅是控制显示和隐藏，不过显示元素仍然存在于DOM结构中，只是样式不同罢了。
示例代码：
立即学习“前端免费学习笔记（深入）”；
上面代码的实现很简单，通过一个按钮来控制表单的显示和隐藏。其中v-show指令直接绑定数据isShowForm，根据其值的真假来决定表单是否显示。
- 使用v-if指令
v-if指令还是比较常见的控制元素的显示和隐藏，不同的是，它是将元素添加/删除于DOM中。
示例代码：
立即学习“前端免费学习笔记（深入）”；
与v-show不同，v-if是将DOM元素添加/删除于DOM生成树中。因此，使用v-if可以在元素不被渲染到页面时减少资源消耗。
- 使用computed计算属性
computed计算属性虽然与方法的实现方式相似，但是它的缓存机制不同于methods。即计算属性只有在它的依赖发生改变时才会重新求值，并且由于它的缓存，多个组件调用同一个计算属性时，只有一次求值。因此，使用computed计算属性可以在Vue.js中实现有效的性能优化。
示例代码：
立即学习“前端免费学习笔记（深入）”；
在上面这个示例中，我们将一个method函数封装成了一个computed计算属性。由于计算属性的缓存特性，只有isShowForm值同步发生变化时才会主动重新计算shouldShowModal值。
总结
这三种方式都可以实现隐藏表单的效果。v-show通过控制CSS样式的显示和隐藏来实现；v-if是将元素添加/删除到DOM树中；computed是在计算属性中对isShowForm值进行了处理。对于不同的场景可以采取不同的方式。
当然，如果我们只需要隐藏某个表单控件，也可以使用v-model和css样式来实现。因此，对于隐藏表单这类问题，根据实际需要来选择最简单和高效的方式是最好的解决办法。
