vue中对于过滤器的使用

57 阅读 0 评论 38 点赞

我是靠谱客的博主香蕉歌曲，最近开发中收集的这篇文章主要介绍vue中对于过滤器的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在开发项目的过程中,经常遇到一些状态值在页面进行展示,如订单的状态,一般返回的都是数字,我们需要根据设定的状态值,去一一对应,转换成汉字来展示

a.如果是自定义的数据,可以直接在过滤器中使用

<div>{{projectStatus | filterWord }}</div>

 filters:{
    filterWord(value){
        var status=[
            {
                code:1,
                name:'待付款'
            },
            {
                code:2,
                name:'待发货'
            },
            {
                code:3,
                name:'待收货'
            },
            {
                code:4,
                name:'已完成'
            }
        ]
        for(var i=0;i<status.length;i++){
        if(status[i].code==value){
          return status[i].name
        }
      }
    }
    
}

b.如果数据需要通过接口获取,那么接口请求数据时,filter中拿不到数据,需要这样处理

<div>{{projectStatus | filterWord }}</div>

<script>
    import {getStatus} from ''  //引用请求字典值的接口
     var filterThis= null
    export default {
            data(){
                auditList:[]
            },
            created(){
                getStatus().then(res=>{
                    this.auditList= res    
                })
            }
         beforeCreate(){
            filterThis = this
          },
        filters:{
            filterWord(value){
              var auditList= filterThis.auditList
              for(var i=0;i<auditList.length;i++){
                if(auditList[i].dictCode==value){
                  return auditList[i].dictName
                }
              }
            }
        }
    }
</script>