Vue.js03之常用标签v-for,v-if,v-show

相信大家看了我的前面两次博客关于Vue.js相关的讲解之后，应该对Vue.js了解了一些基础知识了。本次将会继续讲解Vue.js常用的指令v-for,v-if和v-show。

v-for

我们用 v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in items形式的特殊语法，item是源数据数组并且item是数组元素迭代的别名。

接下来我们上一段代码进行详细的介绍，代码如下：

    
    
    


    

        
        
{{ item }}
        
        
索引值:{{ i }}--->每一项:{{ item }}
        
        
编号:{{ user.id }}--->姓名:{{ user.name }}
        
        
值:{{ value }}--->键:{{ key }}
        
        
这是第{{ count }}次循环
    
    

以上代码介绍了v-for四种常用的遍历方式，分别是遍历普通数组，对象数组，对象以及数字。在body中

中我们主要看五行p标签，其中第二行增加了对数组下标的索引，数组下标是以0开头的。在第5行对数字进行迭代遍历时，则是以1开头的。在第4行遍历对象时，我们是以键值对的形式展现出结果，在第3行遍历对象数组时，我们取出了每个对象的编号以及姓名属性。

运行结果如下图所示：

接下来我们详细介绍一下v-for标签key属性的使用，先上一段代码，如下：

    
    
    


    

        

            编号:
                
            
            姓名:
                
            
            
        

        
        
        

            {{ item.id }}--->{{ item.name }}
        
    
    

这段代码我们主要用key元素来唯一确定某一个对象，注意key必须要用v-bind进行绑定。

我们在添加按钮上绑定了一个事件，用于随时更新list对象数组中的值，我们可以用push方法直接添加，也可以用unshift默认自动添加，运行截图如下所示：

v-if、v-show

v-if根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会克隆相应元素到DOM中 
支持加在