优化篇--Vue模版语法做动态渲染

最新推荐文章于 2024-06-09 11:42:38 发布

选择跳水或自由落体

最新推荐文章于 2024-06-09 11:42:38 发布

阅读量375

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_42244911/article/details/131591930

版权

Vue模版语法做动态渲染，随便记录一下

在这里插入图片描述

    <a-row v-for="(row, rowIndex) in footerConfig" :key="rowIndex">
          <a-col span="4" v-for="(col, colIndex) in row" :key="colIndex">
          		<span class="total-lable" v-once>{{ col.name }}：</span>
          		<span class="total-num">{{ TotalInfo[col.value] }}</span>
           </a-col >
    </a-row>

     TotalInfo: {  
        itemVisitorCount: 3,
        statisDate: "合计上架3天",
      },

footerConfig : [
  [
    {
      name: "日期",
      value: "statisDate",
    },
    {
      name: "可用库存数",
      value: "itemVisitorCount",
    },
    {
      name: "商详UV",
      value: "",
    },
    {
      name: "商详转化率",
      value: "",
    },
    {
      name: "销售量",
      value: "",
    },
    {
      name: "最低唯品价",
      value: "",
    },
  ],
  [
    {
      name: "历史最低价",
      value: "",
    },
    {
      name: "最低到手价",
      value: "",
    },
    {
      name: "预估A类活动价",
      value: "",
    },
    {
      name: "预估A类活动毛利",
      value: "",
    },
    {
      name: "预估S类活动价",
      value: "",
    },
    {
      name: "预估S类活动毛利",
      value: "",
    },
  ],
  [
    {
      name: "商品利润",
      value: "",
    },
    {
      name: "退货率",
      value: "",
    },
    {
      name: "在售库存",
      value: "",
    },
    {
      name: "曝光UV",
      value: "",
    },
    {
      name: "曝光-点击率",
      value: "",
    },
    {
      name: "销售额",
      value: "",
    },
  ],
  [
    {
      name: "客户数",
      value: "",
    },
    {
      name: "收藏人数",
      value: "",
    },
    {
      name: "售龄",
      value: "",
    },
    {
      name: "首次上架时间",
      value: "",
    },
  ],
]