Vue中的条件渲染

vue中的条件渲染是怎么用的？都有哪些指令呢？在vue中条件渲染都有哪些机制，以及可以达到同样需求的语法有哪些区别呢？

v-if 与v-show

v-if和v-show是有一些相似地方的，比如上面的代码中使用了v-if和v-show指令，意思就是当后面跟的表达式show的变量值为true时，将会显示message的内容，反之则不显示，因为默认为show: false，所以打开页面为不显示的情况，那么这两个指令都是不显示会有什么区别吗？其实是有的，我们一起来看一下，如下图所示：

我们通过查看dom元素可以看到，v-if对应的标签变量值是false，便不会存在于dom之上。而v-show对应的标签变量值如果是false，那么还是会存在于dom上，并且会以display：none的形式放在页面之上。

总结

如果需要非常频繁地切换，则使用v-show较好，因为它不会频繁的在页面删除添加dom，只是简单地基于 CSS 进行切换。

如果在运行时条件很少改变，则使用v-if较好，因为它是“真正”的条件渲染，每次隐藏和显示相当于删除dom再添加dom。

v-if / v-else-if / v-else

因为show的值为a，当我们打开页面便会显示 This is A。

注意

这几个指令需要注意的是v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后,否则它将不会被识别。

key值

vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换，那么输入的内容将不会被清空。

代码：

直观看图：

我们可以发现当我改变show的值为true时，input输入框的内容并没有被清空，而是之前输入的内容。

如果有时候我们需要清空里面的内容要怎么做呢？

vue提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key属性即可：

这样一来，每次切换时，输入框都将被重新渲染。请看：