精简代码减少冗余

发布时间：2023-02-18 09:20:38 所属栏目：Oracle 来源：互联网

导读：这段时间,接手了一个项目,发现项目里面有许多冗余的代码一些重复的代码在页面中重复的写感觉修改起来心情挺糟糕的就想到写这个了以下是一个简单的示例在这里插入图片描述 template div class=content el-row class=content-row !-- 使用v-for 来减少

这段时间,接手了一个项目,发现项目里面有许多冗余的代码一些重复的代码在页面中重复的写感觉修改起来心情挺糟糕的就想到写这个了以下是一个简单的示例

　　在这里插入图片描述

　　<template>
　　 <div class="content">
　　    <el-row class="content-row">
　　      
　　      
　　      <el-col :span="6" v-for="item in dataInfo" :key="item.key" class="content-col">
　　        <div class="content-center">
　　          
　　          <div
　　            :style="{
　　              backgroundColor: item.color,height: '50px',lineHeight: '50px',textAlign: 'center',width: '50px'
　　            }"
　　          >
　　            内容
　　          </div>
　　          <div style="margin-top: 20px">
　　            <span style="margin-right: 5px">{{ item.label }}</span>
　　            <span>{{ data[item.key] }}</span>
　　          </div>
　　        </div>
　　      </el-col>
　　    </el-row>
　　 </div>
　　</template>
　　<script>
　　export default {
　　 props: {
　　    data: {
　　      type: Object,
　　      default: () => {
　　        return {
　　          toBeCompleted: 10,
　　          completed: 20,
　　          haveInHand: 13,
　　          total: 33
　　        }
　　      }
　　    }
　　 },
　　 data() {
　　    return {
　　      dataInfo: [
　　        { label: '待完成', key: 'toBeCompleted', color: 'red' },
　　        { label: '已完成', key: 'completed', color: 'green' },
　　        { label: '进行中', key: 'haveInHand', color: 'yellow' },
　　        { label: '总数', key: 'total', color: 'pink' }
　　      ]
　　    }
　　 }
　　}
　　</script>
　　<style lang="scss" scoped>
　　.content {
　　 background-color: #99a9bf;
　　 height: 400px;
　　 width: 600px;
　　 border-radius: 10px;
　　 .content-row {
　　    height: 100%;
　　    display: flex;
　　    justify-content: space-between;
　　    margin-left: 20px;
　　    .content-col {
　　      background-color: #ccc;
　　      height: 100%;
　　      margin-right: 20px;
　　      display: flex;
　　      align-items: center;
　　      justify-content: center;
　　      .content-center {
　　        display: flex;
　　        flex-direction: column;
　　        align-items: center;
　　      }
　　    }
　　 }
　　}
　　</style>

（编辑：甘南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

精简代码 减少冗余

精简代码减少冗余