vue中如何用v-f把上述代码简写。

本文链接：https://blog.youkuaiyun.com/chenmo2019/article/details/108653042

本文介绍了在 Vue.js 框架中如何使用 v-for 指令进行代码简化，通过示例展示了如何将长形式的 v-for 语句转化为更简洁的形式，提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="public-ctn-bg" style="margin-top: 10px;">
  <!-- <highcharts class="chart" :options="chartOptions2"></highcharts> -->
  <ul class="chart-list">
    <li>
      <div>
        <span>杭州市</span>
        <i>12个</i>
        <i>22%</i>
        <el-progress
          type="circle"
          :percentage="22"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
      <div>
        <span>宁波市</span>
        <i>12个</i>
        <i>14%</i>
        <el-progress
          type="circle"
          :percentage="14"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
    </li>
    <li>
      <div>
        <span>嘉兴市</span>
        <i>12个</i>
        <i>17%</i>
        <el-progress
          type="circle"
          :percentage="17"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
      <div>
        <span>台州市</span>
        <i>12个</i>
        <i>10%</i>
        <el-progress
          type="circle"
          :percentage="10"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
    </li>
    <li>
      <div>
        <span>舟山市</span>
        <i>12个</i>
        <i>3%</i>
        <el-progress
          type="circle"
          :percentage="3"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
      <div>
        <span>绍兴市</span>
        <i>12个</i>
        <i>15%</i>
        <el-progress
          type="circle"
          :percentage="15"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
    </li>
    <li>
      <div>
        <span>湖州市</span>
        <i>12个</i>
        <i>9%</i>
        <el-progress
          type="circle"
          :percentage="9"
          width="20"
          stroke-width="3"
          :show-text="false"
          :color="colors"
        ></el-progress>
      </div>
      <div>
        <span>温州市</span>
        <i>12个</i>
        <i>10%</i>
        <el-progress
          type="circle"
          :percentage="10"
          width="20"
          stroke-width="3"
          :show-text="false"
        ></el-progress>
      </div>
    </li>
  </ul>
</div>