Vue基础2：v-for及过滤与排序

数组: v-for /index。  对象: v-for /key

1.v-for遍历数组

【v-for遍历数组语法】

v-for="item in items"

•  tems：要遍历的数组，需要在vue的data中定义好；
• item：迭代得到的数组元素的别名。

【代码例子】

    

        

            {{user.name}} : {{user.gender}} : {{user.age}}
        
    

 

2.v-for数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

【v-for数组角标语法】

v-for="(item,index) in items"

• items：要迭代的数组；
• item：迭代得到的数组元素别名；
• index：迭代到的当前元素索引，从0开始。 

【例子】

    

        

            

                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            
        
    

 3.v-for遍历对象

【v-for遍历对象语法】

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

• 1个参数时，得到的是对象的值；
• 2个参数时，第一个参数是值，第二个参数是键；
• 3个参数时，第三个参数是索引，从0开始。

    

        

            {{index}} - {{key}} : {{value}}
        
    

4.v-for中的key

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 
    这个功能可以有效的提高渲染的效率。
    但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 
【代码例子】

【key使用说明】

• 这里使用了一个特殊语法：:key=""它可以让你读取vue中的属性，并赋值给key属性；
• 这里我们绑定的key是数组的索引，应该是唯一的。

 

【例子】

  
测试: v-for 遍历数组
  

    

      {{p.id}}--{{p.name}}--{{p.age}}
      --删除
      --更新
    
    
  
  
测试: v-for 遍历对象

5、过滤及排序

  

    
    

      

        {{p.id}}--{{p.name}}--{{p.age}}
      
    
    按年龄升序
    按年龄降序
    原本顺序