首页 > 其他 > 详细

vue中过滤器filters的使用

时间:2019-11-22 12:32:32      阅读:87      评论:0      收藏:0      [点我收藏+]

过滤器顾名思义就是需要将后端传过来的数据  “过滤”一哈显示在网页上

场景一:后端传的时间:2019-11-19T04:32:46Z
前端显示在页面上肯定要处理(过滤)

  filters: {
    format(val) {
      return moment(val).format("YYYY-MM-DD HH:SS");
    }
  },
  methods:{  },
在页面中调用 format 
 
  <div>{{this.detailList.update_time|format}}</div>
说明:this.detailList.update_time是参数。
总结:filters里面的函数会调用两次,一次是在mounted之前,传值undefined,页面显示当前时间。另一次是在mounted之后,传值2019-11-19T04:32:46Z,显示处理过的时间。
所以在页面上会看到时间一下子就渲染了,比其他数据快。过了1秒后,数据会更新为需要的时间。
 
场景二:后端一次传来相互关联两个数组,前端需要自己el-select对应的数据
 
    methods:{
       //change所属服务 获得事件类型
        serviceChange(selected) {
          const filter = this.$options.filters["serviceChange"];
          const data = filter(selected);
        },
    },

  filters:{
    serviceChange(selected){
     ... ...
    },
  },
总结:除了在模板中使用filters,在methods中也可以使用filters中的过滤器,

vue中过滤器filters的使用

原文:https://www.cnblogs.com/duanhuarong/p/11910383.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!