过滤器以及事件的获取

过滤器（filter）

我们在渲染数据的过程中，有一些内容并不是我们想要的文本格式，这个时候我们可以利用过滤器去实现我们的文本格式化。过滤器其实就是一个工具函数，通过执行这个函数，实现数据格式化。
比如：后端返回给前端的时间格式：时间戳 1604370847913
用户要看到的数据格式： 2020/11/3 10:34   或者 2020-11-3
通过过滤符 ‘|’ 去调用过滤器

过滤器创建方式之局部过滤器

视图：
{{数据 | 过滤器名称}}
​
逻辑代码
filters:{
    toPrice(n,m){
        //第一个参数是你要过滤的内容
        //第二个参数是你调用过滤器的传参
        return 结果就是文本格式化的结果
    }
}

其实在项目中，局部过滤器用的比较少，因为代码文件很多，每一个页面都可能用到同一个过滤器比如时间转化，如何解决？

利用全局过滤器

过滤器创建方式之全局过滤器

视图
{{msg|toStr(4,6)}}
​
逻辑
//全局过滤器 Vue.filter() 它有两个参数，第一个参数是你要过滤的内容，第二个参数是你的逻辑函数，这个函数有两个参数，①要过滤的内容，②要过滤内容的传参
        Vue.filter('toStr',(n,m)=>{
            return n.substring(m)
        })

过滤器的应用案例之时间转化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in newsList">
          <p>新闻标题：{{item.title}}</p>
          <p>发表时间:{{item.pTime | toTime('yyyy-MM-dd HH:mm:ss')}}</p>
          <p>发表时间:{{item.pTime | toTime('yyyy/MM/dd HH:mm:ss')}}</p>
          <p>发表时间:{{item.pTime | toTime}}</p>
          <p>单价：{{item.price | toPrice}}</p>
        </li>
      </ul>
    </div>
    <script>
      //字符串补位的方法  padStart() 在字符串前面补位  padEnd 在字符串结尾补位
      // let str = '你好'
      // let result = str.padStart(5,'x')
      // let result1 = str.padEnd(6,'x')
      //创建全局过滤器
      Vue.filter("toTime", (timer,type) => {
        let date = new Date(timer);
        //获取年份
        let year = date.getFullYear();
        //获取月份
        let month =((date.getMonth() + 1)+'').padStart(2,'0')
        //获取天数
        let day = (date.getDate() +'').padStart(2,'0')
        let hour = (date.getHours() +'').padStart(2,'0')
        let minute = (date.getMinutes() +'').padStart(2,'0')
        let second = (date.getSeconds() +'').padStart(2,'0')
        console.log(day);
        //return `${year}/${month}/${day}`
        if(type=='yyyy-MM-dd HH:mm:ss'){
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`
        }else if(type=='yyyy/MM/dd HH:mm:ss'){
            return `${year}/${month}/${day} ${hour}:${minute}:${second}`
        }else{
             return `${year}-${month}-${day}`
        }
       
      });
      Vue.filter("toPrice",(n)=>{
          return n.toFixed(2)
      })
      new Vue({
        el: "#app",
        data: {
          newsList: [
            {
              id: 1,
              title: "华春莹怼蓬佩奥，以彼之句式还施彼身！",
              pTime: 1604374197699, //发表时间
              price:99
            },
            {
              id: 2,
              title: "外交部回应在美记者签证实际延期仅三天",
              pTime: 1608374197699, //发表时间
              price:1999
            },
            {
              id: 3,
              title: "北京新增2例境外输入新冠肺炎确诊病例和1例无症状感染者",
              pTime: 1614374197699, //发表时间
              price:799
            },
            {
              id: 4,
              title: "谭德塞被确认为新冠阳性病例接触者后，世卫组织回应",
              pTime: 1623374197699, //发表时间
              price:886
            },
          ],
        },
      });
    </script>
  </body>
</html>
​

 

 
posted @ 2021-01-03 17:52  诡道也  阅读(95)  评论(0)  编辑  收藏  举报