过滤器（Vue3中已砍）

一、定义过滤器

image.png

capitalize是自定义的首字母大写的函数，message作为参数传给这个函数，花括号得到的是函数的返回值

过滤器函数必须被定义到filters节点下（与methods平级）

过滤器一定要有return返回值

过滤器的形参中，val代表管道符前面的那个值（不一定要叫val，形参名合法就行，只是可以通过形参获取管道符前面那个待处理的值）

示例代码：

<div id="app">
  <p>message 的值是：{{ message | capitalize }}</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello vue.js",
    },
    // 过滤器函数，必须被定义到 filters 节点之下
    // 过滤器本质上是函数
    filters: {
      // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
      capitalize(val) {
        // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
        // val.charAt(0)
        const first = val.charAt(0).toUpperCase();
        // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
        const other = val.slice(1);
        // 强调：过滤器中，一定要有一个返回值
        return first + other;
      },
    },
  });
</script>

二、私有过滤器和全局过滤器

image.png

实际开发中更多的是定义全局过滤器

如果全局过滤器和私有过滤器名字一致，会根据就近原则调用私有过滤器

2.1. 定义一个日期格式化的全局过滤器

dayjs插件----时间格式优化：

（官网说明文档🔗：解析 | Day.js中文网）

<td>{{ item.time | dateFormat }}</td>
...
<!-- 只要导入了 dayjs 的库文件，在 window 全局，就可以使用 dayjs() 方法了 -->
<script src="./lib/dayjs.min.js"></script>
...
<script>
  // 声明格式化时间的全局过滤器
      Vue.filter('dateFormat', function (time) {
        // 1. 对 time 进行格式化处理，得到 YYYY-MM-DD HH:mm:ss
        // 2. 把 格式化的结果，return 出去

        // 直接调用 dayjs() 得到的是当前时间
        // dayjs(给定的日期时间) 得到指定的日期
        const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        return dtStr
      })
  ...
</script>