同一张图片展示数量不同

如图:


1608713937(1).png

思路(vue):

1、整体是个循环,循环里面有图片和文字两个模块;
2、图片又是一个循环,图片的个数不同

<div v-for="(item,indexs) in List" :key="indexs" style="display:flex;">
//左边的图片
  <div v-for="(i,index) in item.num" :key="index">
    <img src="../assets/img/help/help.png" alt="" >
  </div>
//右边的文字
  {{item.title}}
</div>
  data() {
    return {
      List: [
        {
          num:3,
          title: "人数"
        },
        {
          num:2,
          title: "人数"
        }
      ]
    };
  },

其他需要的样式自己看清加哦~
如果还有其他简便写法,欢迎各位一起讨论哦~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容