vue中的过滤器

过滤器的定义
将一个数据经过一个过滤器，进行加工，来得到你想要的结果。 （可以获取某一些值或对值进行加工）
过滤器的种类：
全局过滤器和局部过滤器。

全局过滤器： 全部的vue实例都可以用
定义

  Vue.filter("过滤器名称",过滤器处理函数)

使用

数据 | 过滤器名称     插值：{{数据 | 过滤器名称}}}  数据绑定  :class="数据 | 过滤器名称

局部过滤器：只能在定义的那一个vue实例中使用
定义：定义在new Vue中的配置对象filters属性中

  filters:{
    过滤器名称（）{

}

  }

1.当全局过滤器和局部过滤器重名时，会采用局部过滤器。
2.过滤器可以调用多个
3.过滤器可以接受参数(过滤器的第一个参数默认是 过滤的数据，传递的参数从第二个开始接受)

  {{data | filterA(arg1,arg2) }}

  //value的值就是data的值。
  filterA(value,arg1,arg2){

  }

示例

 <div id="app">
       {{day | addZero | filterNum(2)}} <br>

       {{num | addZero | filterNum}}
   </div>

   <div id ="app2">
    {{day | addZero}}
    <br>
    {{num | filterNum}}

  <script>
      Vue.filter("addZero",(value)=>{
          return value<10?"0"+value:value
      })

      //创建Vue实例 得到ViewModel
      var vm = new Vue({
          el:"#app",
          data:{
              //今天是几号
              day:6.782415,
              num:9
          },
          filters:{
            //   es6 函数的写法
              filterNum(value,n){
                  value = parseFloat(value)
                  return value.toFixed(n);
              },
              addZero(value){
                  return value>10?value:"1"+value
              }
          }
      });

      var vm2 = new Vue({
          el:"#app2",
          data:{
              //今天几号
              day:5,
              num:10.464
          }
      })
  </script>

过滤器的案例
实现效果

 刚刚       n分前        n小时前      n天前         n月前          n年前

    小于1分钟   小于60分   小于24小时      小于30天     小于12月        大于12月

     60       60*60      60*60*24    60*60*24*30  60*60*24*30*12

代码

<script>
       //创建Vue实例 得到ViewModel
       var vm = new Vue({
           el:"#app",
           data:{
               date:new Date("2021-12-30 17:27:20")
           },
           filters:{
               formater(value){
                    //获取要过滤的时间与当前时间的时间差。（单位秒）
                    const d = Math.floor((Date.now()-value.getTime())/1000);
                    const arr = [0,60,60*60,60*60*24,60*60*24*30,60*60*24*30*12];
                    const _arr = ["刚刚","分钟前","小时前","天前","月前","年前"];
                    for (var i = arr.length-1; i >=0; i--) {
                       if(d>arr[i]){
                           return i==0?_arr[i]:Math.floor(d/arr[i]) + _arr[i]
                       }
                    }
                    return value
               }
           }
       })
   </script>

过滤器案例
定义一个日期的过滤器，将 时间转化为 2021-12-30 17:07:09 这样的格式，同时还可以传递参数（yyyy-MM-dd） 则显示 2021-12-30
代码

  <div id="app">
        <div>当前时间是： {{ dateTime }}</div>
        <div>格式化后的时间是： {{ dateTime | dateFormat }}</div>
      </div>
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            dateTime: new Date(),  //括号里面可以传参数
          },
          // 定义一个局部的过滤器，格式化当前时间
          filters: {
            dateFormat: (dateTime) => {
              var now = new Date(dateTime)
              var y = now.getFullYear()    //padStart()用于头部补全 
              var m = (now.getMonth()+1).toString().padStart(2, '0')
              var d = now.getDate().toString().padStart(2, '0')
              var hh = now.getHours().toString().padStart(2, '0')
              var mm = now.getMinutes().toString().padStart(2, '0')
              var ss = now.getSeconds().toString().padStart(2, '0')
              // 过滤器中要有返回值
              return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
          }
        })
    </script>

计算属性案例
.在页面中输入，数学，语文，英语的成绩，使用计算属性计算总分。

  <div id="app">
      数学成绩为:<input type="text" v-model="math"><br>
      语文成绩为:<input type="text" v-model="language"><br>
      英语成绩为:<input type="text" v-model="english"><br>
       总成绩为{{Sum}}
      
    </div>
    <script>

        var vm = new Vue({
          el:"#app",
          data:{
              //定义数学
              math:"",
              //定义语文
              language:"",
              //定义英语
              english:""
          },
          methods:{
                   
          },
          computed:{
             //定义计算输入科目总和的方法
             Sum(){
                 sum =Number(this.math)+Number(this.language) + Number(this.english);
                 return sum;
             }
          }
        })
    </script>

过滤器案例
定义一个过滤器，输入年份，显示对应的结果。比如：2000 显示 公元2000年
-100 显示 公元前100年

 <div id="app">
        请输入年份：<input type="text" v-model="dateTime">
        <div>格式化后的时间是：{{ dateTime | dateFormat }}</div>
      </div>
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            dateTime: "",  //括号里面可以传参数
          },
          // 定义一个局部的过滤器，格式化当前时间
          filters: {
            dateFormat: (dateTime) => {
            //   var now = new Date(dateTime)
            //   var y = now.getFullYear()    
            y = Number(dateTime);
             if(y){
                return (y>0?`公元${y}年`:`公元前${y}年`)  
             }
            }
          }
        })
    </script>