Vue2中的v-if和v-show

一、v-if相关

1.v-if指令通过后边绑定的条件进行判断是否进行显示，我们可以通过下边的例子进行一个简单的v-if实例，可以看出的是，flagv-if的判断语句分别（flag==0）（flag==1），所以我们可以通过绑定条件判断语句进行判断是否渲染

    

   
         
未登录 请先登录
       
         
已经登陆
       

    

    
    
    

2. 我们想实现上述代码的功能，同样可以用v-if... v-else的方式进行实现，与if...else的用法相似，当不满足v-if的条件的时候，就会显示v-else所在标签的内容

 

   
         
未登录 请先登录
       
         
已经登陆
       

    

    
    

二、v-show相关

1.上述代码我们同样也可以用v-show来表示，例如以下代码

    

   
         
未登录 请先登录
       
         
已经登陆
       

    

    
    

2.那么v-show 和v-if都能实现这个功能，他们之间有什么区别呢（大厂高频面试题）

1）v-if如果不符合条件，直接不执行，不进行页面渲染，在页面控制台调试不会找到不符合条件的标签，不会生成对应节点

2）v-show不同，不符合条件的话他会在不符合条件的标签中的style加上样式display:none；将该标签隐藏掉；

3）从性能角度分析，v-show的渲染需要加载所有的节点，而v-if只会加载触发条件的标签。如果需要客户频繁操作的，应用v-show更好一些，不需要重新加载节点（因为全都加载出来了只需要更改它的display:none；），如果用户不频繁操作的话，应用v-if更好一些，性能更快更好

三、循环指令v-for

1.data中都可以定义什么类型数据（面试题）：什么类型都可以定义；

2.我们在data中定义一个数组想输出的时候就需要用到了v-for，例如以下代码实现该功能,其中val代表我们数组中的值  index就是我们数组中的索引值，arr就是我们想输出的数组

    

   
       
{{val}}
     

    

    
    

3.我们同样可以用以下代码进行输出，不同的是我们v-for中语句的区别 这里并没有index，也可以进行使用，只是在这里没有也不能用索引值

所以我们需要用索引值的时候就用第一种方式，不需要索引的时候用第二种方式也可以

    

   
       
{{val}}