过滤器的简单使用

过滤器: 数据格式化工具

作用 : 使用过滤器(数据格式化), 将一个不满足条件的数据, 处理成想要的结果.

使用步骤:

1. 先注册
2. 再使用

• 注册

  • 注册全局过滤器 在所有的vue实例中都可以使用

  • 注册局部过滤器 只能在当前注册过滤器的vue实例中使用

全局过滤器的注册:

Vue.filter('filterName',callback)

参数1: filterName: 过滤器的名字;

参数2: callback : 回调函数(谁调用了这个过滤器,就会调用这个回调)

​

使用: 在需要过滤数据的地方 数据 |(管道) filterName; （其中，回调中的 res 就是需要处理的数据）

注意点 :

1. 全局过滤器需要在vue实例之前注册完成;
2. 必须给一个return 值, 该值就是过滤器处理后的结果.

little-demo: 注册一个全局过滤器

<div id='app'>
    //拿到过滤器中的return值
    <h1>{{ date | dateFilter}}</h1>
	
</div>

<script>
    //注册全局过滤器
   	
    Vue.filter('dateFilter',res=>{
        return '哈哈哈'
    })
        
    const vm = new Vue({
		el:'#app',
        data: {
			date:new Date()
        }
    })   
        
</script>

little-demo : 借助moment.js 插件,显示国内日期

//moment.js 插件可以处理时间对象,也可以处理时间戳

//1.安装 moment.js
//在node中  npm i moment
//2.引入moment.js
//3. 使用

    <div id="app">
          <!-- 拿到的数据不是我们想要的,想要转化成国内日期格式 -->
          <h1>{{ day | dayFilter }}</h1>
          <h1>{{ day2 | dayFilter }}</h1>
    </div>

    <script src="./vue.js"></script>
    <!-- 引入moment.js -->
    <script src="./node_modules/moment/moment.js"></script>
    <script>
          //借助moment.js 来实现格式化日期(可以是时间对象,也可以是时间戳)
          //注册一个全局过滤器
          Vue.filter("dayFilter", res => {
            //   moment(res).format("传入想要的格式");
            return moment(res).format("YYYY-MM-DD hh:mm:ss");
          });

          const vm = new Vue({
            el: "#app",
            data: {
              //日期对象
              day: new Date(),
              //时间戳
              day2: +new Date()
            }
          });
    </script>

注册局部过滤器

1. 字段: filters,与data同级,该过滤器只能在该实例中使用.
2. 里面的过滤器写起来像方法
3. 必须有返回值

little-demo :

<div id="app">
      <!-- 拿到的数据不是我们想要的,想要转化成国内日期 -->
      <h1>{{ day | dayFilter }}</h1>
</div>

<div id="app1">
    <!-- 在边界2中也想拿到边界1中注册的过滤器-->
    <h1>{{ day | dayFilter }}</h1>
</div>

<script src="./vue.js"></script>
<!-- 引入moment.js -->
<script src="./node_modules/moment/moment.js"></script>
<script>
    //实例1
    const vm = new Vue({
        el: "#app",
        data: {
            //日期对象
            day: new Date()
        },
        filters: {
            dayFilter(res) {
                return moment(res).format("YYYY-MM-DD hh:mm:ss");
            }
        }
    });
	//实例2
	const vm1 = new Vue({
        el: "#app1",
        data: {
            //日期对象
            day: new Date()
        }
	});	

// 拿到的结果是:
// "2019 - 04 - 17 01: 56: 36"
// "2019-04-17T05:56:36.812Z"
//结果说明,局部过滤器只能在注册了该过滤器的实例中使用,不能在别的实例中使用

在使用过滤器的时候可以传参,参数用来定义格式化字符串等等

​ 使用参数的好处 : 例如下面的例子, 又想拿到完整的日期,又想只要年月日,可以给过滤器传参,这样就避免了注册多个过滤器。

little-demo:

<div id="app">
      <!-- 拿到的数据不是我们想要的,想要转化成国内日期 -->
      <h1>{{ day | dayFilter('YYYY-MM-DD hh:mm:ss') }}</h1>
      <!-- 只要国内日期的年月日 -->
      <h1>{{ day | dayFilter('YYYY-MM-DD') }}</h1>
</div>

<script src="./vue.js"></script>
<!-- 引入moment.js -->
<script src="./node_modules/moment/moment.js"></script>
<script>
    Vue.filter("dayFilter", (res, dateStr) => {
        //   moment(res).format("传入想要的格式");
        return moment(res).format(dateStr);
	});

	const vm = new Vue({
        el: "#app",
        data: {
            //日期对象
            day: new Date()
        }
	});

    // 拿到的结果是:
    // 2019 - 04 - 17 01: 56: 36
    // 2019 - 04 - 17
</script>