vue中的条件渲染

首先需要知道v-if这个指令

v-if的意思是它可以根据v-if后面表达式的值，来让这个标签是否存在

现在是false

改变isShow的值

发现Hello World就出来了

其实条件渲染就是通过判断v-if的值，来渲染页面

除了v-if还有一个v-show指令同样可以做到判断条件然后来渲染页面

那么他们两个有什么不同呢

开始时，isShow都是false，但是不同的是，v-if的div并没有挂载到dom上，v-show的div已经挂载到了dom上，只是display设置为none。

当isShow为true时，两个都显示出来了

那么哪一个更好呢，v-show其实是更好一点的，因为他不需要去频繁的挂载dom节点，重新形成domTree，效率更高。

下面的一段话复制于vue官网

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if还有一些更加复杂的语法：

当然了v-if和v-else指令必须要放在一起使用，不然系统会报错

-------------------------------------------------------------------------------------------------------------------------------------------------

讲一下vue中的key值

看下面的页面：

我们往输入框中添加一些内容

发现页面确实更新了，输入框中的内容却没有被更新，这是由于vue会尽量重新复用你页面上原有的内容，因为原来有一个input所以再次更新的时候就没有更新

解决方法是加一个key值

这是因为key值在vue中是用来标注页面唯一的元素的，所以再次刷新的时候，就会更新input了