美文网首页
v-for 遍历数组时,用index给设置class唯一

v-for 遍历数组时,用index给设置class唯一

作者: Gemkey | 来源:发表于2018-09-11 15:31 被阅读7次

    在使用v-for遍历数组时,希望通过index将每一个item都做一个区分,即给每个item都增加一个class,如class="item item-1"这种形式。
    html:
    定义:class的方式有两种
    方式1.

    <div v-for="(item,index) in list" class="item" :class="'item-'+index" :key="index">
          <img :class="{'active':item.show}" :src="item.src />
    </div>
    

    方式2.

    <div v-for="(item,index) in list" class="item" :class="['item-'+index]" :key="index">
          <img :class="{'active':item.show}" :src="item.src />
    </div>
    

    js:

    <script>
      export default {
        data() {
          return {
            list: [
              {
                src: "http://t2.hddhhn.com/uploads/tu/201612/98/st93.png",
              },
              {
                src: "http://img.88tph.com/production/20170914/88tph-12347299-2.jpg",
              },
              {
                src: "https://goss1.vcg.com/creative/vcg/400/version23/VCG41520916875.jpg",
              },
              {
                src: "https://goss2.vcg.com/creative/vcg/400/version23/VCG41546770582.jpg",
              },
              {
                src: "https://goss1.vcg.com/creative/vcg/400/version23/VCG41502848179.jpg",
              },
              {
                src: "https://goss1.vcg.com/creative/vcg/400/version23/VCG41473435800.jpg",
              },
              {
                src: "https://goss2.vcg.com/creative/vcg/400/version23/VCG41587821180.jpg",
              },
              {
                src: "https://goss.vcg.com/creative/vcg/400/version23/VCG21gic13800471.jpg",
              },
              {
                src: "https://goss2.vcg.com/creative/vcg/400/version23/VCG41482078794.jpg",
              }
            ]
          };
        }
      };
    </script>
    

    最终效果:


    image.png

    相关文章

      网友评论

          本文标题:v-for 遍历数组时,用index给设置class唯一

          本文链接:https://www.haomeiwen.com/subject/pheugftx.html