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

2018-09-11  本文已影响7人  Gemkey

在使用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
上一篇 下一篇

猜你喜欢

热点阅读