Vue中computed的使用（附带例子）

客官°小女子只卖身不卖艺 2024-03-22 13:38 16阅读 0赞

## 一、背景 ##

遇到一个需求：将后端返回的对象数组按照其某个属性进行分类显示，自然就想到了用computed来进行二次数据处理。

## 二、后端返回的数据格式 ##

{
        "agency_id": "xxx",
        "agency_img": "https:xxx.xxx.xx",
        "agency_name": "xxx",
        "agency_bussiness": "type1"
    },
    {
        "agency_id": "xxx",
        "agency_img": "https:xxx.xxx.xx",
        "agency_name": "xxx",
        "agency_bussiness": "type2"
    },
    {
        "agency_id": "xxx",
        "agency_img": "https:xxx.xxx.xx",
        "agency_name": "xxx",
        "agency_bussiness": "type3"
    }

分类的依据就是 agency\_bussiness 这个属性

## 三、实现思路及代码 ##

1.  initData()函数向后端获取数据，然后对 agencys 变量进行初始化；
2.  在computed中的两个 type1Agency（）、type2Agency（）分别对数组数据进行二次过滤，然后绑定到 template的两个div中被分别遍历。

--template 部分:
    
    <div>
        <div v-if="this.agency_bussiness === 'type1'">
            <agencyCard v-for="item in type1Agency" v-bind="item" :key="item.index"/>
        </div>
    
        <div v-else-if="this.agency_bussiness === 'type2'">
            <agencyCard v-for="item in type2Agency" v-bind="item" :key="item.index"/>
        </div>
    </div>
    
    
    --script 部分：
    
    data() {
        return {
            agency_bussiness: 'all',
            agencys: []
        };
    },
    
    methods: {
        initData() {
            this.getRequest('/agencys').then((res) => {
            this.agencys = res;
            });
        }
    },
    
    created() {
        this.initData();
    },
    
    computed: {
        type1Agency() {
          return this.agencys.filter((item) => item.agency_bussiness === 'type1');
        },
        type2Agency() {
          return this.agencys.filter((item) => item.agency_bussiness === 'type2');
        },
    }