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

最新推荐文章于 2025-01-13 09:37:04 发布

原创最新推荐文章于 2025-01-13 09:37:04 发布 · 675 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

文章介绍了一个在Vue.js应用中处理后端数据的需求，通过computed属性对后端返回的对象数组依据agency_bussiness属性进行分类，然后在模板中使用v-for遍历展示不同类型的agency。实现方式包括初始化数据、定义computed方法进行数据过滤，以及在template中的条件渲染。

一、背景

遇到一个需求：将后端返回的对象数组按照其某个属性进行分类显示，自然就想到了用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 这个属性

三、实现思路及代码

initData()函数向后端获取数据，然后对 agencys 变量进行初始化；
在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');
    },
}