Vue入门指南（5）

v-if 和 v-show

直接看v-if例子来

 v-if 和 v-show 

        Error
        Ok
        
网络连接错误：404
        
网络连接成功：200

TIM图片20180125164626.jpg

TIM图片20180125164630.jpg

我们会看到，当条件为真时，p存在于DOM中，为假时，p完全不存在。这是因为v-if是真实的条件渲染，它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。有更高的切换消耗。
再来看看v-show

网络连接错误：404
网络连接成功：200

TIM图片20180125170354.png

在v-show中，仅仅改变的是p的display。因为v-show只是简单地基于 CSS 切换。有更高的初始渲染消耗。
所以，需要频繁切换时用v-show，如果在运行时条件不大可能改变则用v-if。

v-for

for循环

        

            

                {{word}}
            
        

        

TIM图片20180125183247.jpg

在这里我需要说一点，遍历users数组时我们用到了template标签，打开控制台我们发现实际上并没有这个标签。因为template在控制台不会渲染。