Vue computed计算属性的使用（记录1）

template中通过计算属性获取值并显示页面内容

场景：在页面中根据获取到的值动态显示，此时偶尔需要根据获取的值再进行计算或是筛选其他数据，来显示页面
注意：在computed里需要return一个function，在function里return值

computed

computed: {
        getWorkType(ids) {
            return ids => {
                let str = '';
                if (!ids) return '空';
                for (let i = 0; i < ids.length; i++) {
                    this.workTypeOptions.filter(item => {
                        if (item.value == ids[i]) {
                            if (i < ids.length - 1) {
                                str += item.label + '、';
                            } else {
                                str += item.label;
                            }
                        }
                    });
                }
                return str;
            };
        },
    },

template

<el-form-item label="工作模式:">
     <span>{{ getWorkType(props.row.workTypeId) }}</span>
</el-form-item>