vue中的列表过滤和列表排序

列表过滤

• 
      
  
          
          
          
  
              
                 
  {{p.name}}-{{p.age}}-{{p.sex}}
          
      
  
  

• 运行一下,因为过滤的缘故，越是搜索数据越少。预期不符.

  解决方案:

  1、加入空的数组 flashPersons，作用是保留persons数组的数据

  2、用完整的watch加入 immediate: true进行尝试

  3、用index方法将flashPersons显示出来数据，

• 
      
  
          
          
          
  
              
                 
  {{p.name}}-{{p.age}}-{{p.sex}}
          
      
  
  

  由于watch的复杂性，用computed计算属性更好

  • 为什么计算属性更好，可以这么想。

  • 1、computed是由data中的数据是计算得来的，无需像watch监听数据的改变才变化。

  • 2、computed计算出来的属性，不会修改原来的属性。无需在创建空数组

  • 
        
    
            
            
            
    
                
                   
    {{p.name}}-{{p.age}}-{{p.sex}}
            
        
    
    

  • 当注释后的代码，无法折叠时。可以用#region和#endregion

    列表排序

    • 思路分析

      当点击升序，sortType的值变为2,之后执行v-for语句中flashPersons在查询的基础上。添加一个排序的方法。

      点击原数组按钮，sortType的值变为0。回到只有查询的功能。也就是列表过滤的内容

    • 
          
      
             
              升序
              降序
              原数组
              
      
                  
                  
      {{p.name}}-{{p.age}}-{{p.sex}}