VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

 

过滤器函数的传参：

第一个参数 A 是固定的，表示要过滤之前的内容。

第二个参数 B，表示要把原本的内容 A 过滤成 B。 写函数内容时， 这里第二处只写个参数。

实际的值要写到管道符调用函数的括号内。 如下：

{{ item.ctime | dateFormat('yyyy-mm-dd') }}

 

 Vue.filter('过滤器的名称', function (A, B) {};

 

这里函数调用的时候没有传参， 但是在函数里写了一个默认值。 

 形参的默认值： 当不传入参数时，默认使用形参里的默认值 。 

{{ item.ctime | dateFormat( ) }}

Vue.filter('dateFormat', function (dateStr, pattern = "") {}

 

 

<body>
  <div id="app">
    <p>{{msg | msgFormat('疯狂233') | test}}</p>
  </div>

  <script>
  Vue.filter('msgFormat', function(msg, arg){
    // return msg.replace('单纯', '邪恶')  // replace 要和正则搭配使用，否则无法匹配全局。
    // return msg.replace(/单纯/g, '邪恶')   // ! 注意这里正则的使用。
    return msg.replace(/单纯/g, arg);
  });

  // 过滤器可以多次调用。  
  // {{msg | msgFormat('疯狂233') | test}}
  // 初始信息被中间的过滤， 返回第二次的结果，第二次的结果又被第三次处理再返回。
  Vue.filter('test', function(msg){ 
    return msg + '======='
  });

  var vm = new Vue({
    el:'#app',
    data:{
      msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻地问，谁是世界上最单纯的男人。'
    },
    methods:{
    }
  });
  </script>
</body>

 

自定义按键修饰符

Vue.config.keyCodes.f2 = 113;

事件调用

@keyup.f2

 

posted @ 2019-01-16 20:28  CarpenterZoe  阅读(1072)  评论(0)  编辑  收藏  举报