0四、Vue.js---自定义过滤器

时间 2019-11-18

原文原文链接

自定义过滤器的关键字是 filter。javascript

官网描述：Vue.js 容许你自定义过滤器，可被用于一些常见的文本格式化。过滤器能够用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：html

<!-- 在双花括号中 -->

{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->

<div v-bind:id="rawId | formatId"></div>

官网中提到的管道的关键字是“|”，其格式是：{{ data | fun }}。java

自定义过滤器的做用：在数据显示以前，对数据进行处理包装。过滤器也分为全局过滤器（filter）和局部过滤器(filters)。具体用法见代码及注释部分：api

js代码部分：app

window.onload = function (){
  // 定义全局过滤器
  Vue.filter("test",function(data){
    // 形参data的实参是管道{{ data | fun }}中 data
    return data >=10;
  });
  new Vue({
    el:"#app",
    data:{
      num:0,
      today:new Date()
    },
    // 定义局部过滤器
    filters:{
      // 定义局部过滤器，将觉得数字前补0，其余的原样输出
      addZero:function(data){
        return data>=10 ? data : "0"+data;
      },
      // 过滤器带多个参数
      dateFormat:function(data,arg1,arg2){
        // 能够打印 arg1/arg2 看看结果
        // console.log(arg1);
        // console.log(arg2);
        let year = data.getFullYear();
        let m = data.getMonth()+1;
        let day = data.getDate();

        return year+arg1+m+arg1+day;
      }
    }
  });
}

html代码部分：code

<body>
  <div id="app">
    <input type="text" v-model="num">
    <div>{{ num }}</div>
    <!-- 使用管道 {{ data | fun }} -->
    <p>经过全局过滤器 test 判断 num 是否 >=10</p>
    <div>{{ num | test }}</div>
    <hr/>
    <p>经过局部过滤器 addZero，将觉得数字前补0，其余的原样输出</p>
    <div>{{ num | addZero }}</div>
    <hr/>
    <p>
        管道前的参数永远都是过滤器方法的第一个参数，<br/>
        过滤器方法括号中所定义的参数，以第二位参数开始向后顺序排列
    </p>
    <div>{{ today | date-format("-","参数二") }}</div>
  </div>
</body>

至此，完毕。感谢您的阅读。orm

比你牛逼的人还在努力，咱们有什么理由选择安逸。htm