Vue过滤器实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61398960/article/details/124964893

过滤器

过滤器拿来干啥的，用于简单的数据处理，比如时间戳转化为时间（这里我们用到了dayjs这个库也可以使用momentjs），比如显示商品价格1999转化成1,999这样的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.2/dayjs.min.js"></script>

<div id="app">
  显示格式化时间
  <div>{{date | dateFmt}}</div>
  多个过滤器一起使用
  <div>{{date | dateFmt | mySlice}}</div>
  传入多个参数
  <div>{{date | dateFmt('YYYY—MM—DD HH.mm.ss')}}</div>
</div>

<script>
  //如果想全局使用过滤器的话，可以这么声明
  // Vue.filter()
  const app = new Vue({
    el: '#app',
    data: {
      date:1653456624524//时间戳，通过Date.now()获取
    },
    filters:{
      //首先，过滤器默认传入v，也就是'|'前面的值，作为其第一个参数，如果想添加参数，会自动作为第二个参数
      //这里采用es6的语法，如果str不传入，那么就默认值为'YYYY年MM月DD日 HH:mm:ss'
      dateFmt(v,str='YYYY年MM月DD日 HH:mm:ss'){
        return dayjs(v).format(str)
      },
      //使用第二个过滤器的时候，传入的v为第一个过滤器的返回值
      mySlice(v){
        return v.slice(0,4)
      }
    }
  })
</script>
</body>
</html>