v-for动态绑定图片

工作记录

背景：v-for中需要动态绑定图片和文字,Data数据需要用以下个格式： src: require("…/…/…/public/img/bg/user.png"),

html:

<div class="article-data">
      <div
        class="data-item"
        v-for="(allnums, allnumkey) in statisticalInfo"
        :key="allnumkey"
      >
        <div class="data-item-imghe">
          <img :src="allnums.src" class="data-item-img" />
        </div>
        <div class="data-item-info">
          <P>{{ allnums.info }}</P>
          <P style="font-size: 2em; font-weight: 600; color: #68bbc4">{{
            statistical.userCount
          }}</P>
        </div>
      </div>
    </div>

data

      statistical: {},
      // 数据统计的html静态文字
      statisticalInfo: [
        {
          info: "累计用户总数",
          src: require("../../../public/img/bg/user.png"),
        },
        {
          info: "累计订单总数",
          src: require("../../../public/img/bg/orderNum.png"),
        },
        {
          info: "累计已支付定单",
          src: require("../../../public/img/bg/payedOrder.png"),
        },
        {
          info: "累计合成品数",
          src: require("../../../public/img/bg/finishNum.png"),
        },

备注：v-for的遍历不需要加下标值（arr[index]）