Vue学习:过滤器、焦点、键盘修饰符/自定义键盘修饰符

过滤器的基本使用

• 私有过滤器

{{item.ctime | dataFormat('yyy-mm-dd')}}

• filters
  私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错

      var dt = new Date(input);

      // 获取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');



      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

      // 否则，就返回  年-月-日 时：分：秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 获取时分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');



        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

• 全局过滤器

    
    
    



    
{{ msg | msgFormat('66')| test}}

注意
当有局部和全局两个名称相同的过滤器的时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用

键盘修饰符/自定义键盘修饰符

Vue.config.keyCodes.名称=按键值

Vue.config.keyCodes.f2=113;

• 使用自定义键盘修饰符

获取焦点

    
    
    
    



    
        搜索名称关键字：
        
    

案例：品牌列表

    
    
    
    
    
    
    




    


    

        

            
添加品牌
        
        

            
                Id:
                
            

            
                Name:
                
            

            
            

            
                搜索名称关键字：
                
                
            
        
    



    

        

        

            
Id
            
Name
            
Ctime
            
Operation
        
        
        

        
        
        
        

            
{{ item.id }}
            

            
{{ item.ctime | dateFormat() }}
            

                删除
            
        
        
    







    
{{ dt | dateFormat }}