美文网首页
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唯一

    在使用v-for遍历数组时,希望通过index将每一个item都做一个区分,即给每个item都增加一个class,...

  • vue 列表渲染-05

    v-for 可以遍历数组和者对象1。v-for = "(item index ) in items"当items...

  • For-in

    用for-in去遍历容器时 NSArray 是按照数组的index顺序遍历 NSDictionary 是通过遍历字...

  • VUE指令语法|列表渲染v-for及key原理和作用

    v-for指令 基本语法 index是循环指针,key可以是index,但是更好是遍历对象的唯一标识符 key作用...

  • Days15 vue项目实战3

    1.v-for 遍历数组v-for =" item in list" 遍历对象v-for =" (ite...

  • Go的数组和指针

    一、 定义数组 二、 遍历数组 下标遍历 range遍历(index) range遍历(index,value) ...

  • vue循环指令:v-for

    循环数组: 循环对象数组 遍历对象 循环数字 数字从1开始v-for循环加key作为唯一标识,在单选框前插时不会出...

  • 10 vue 遍历

    1 v-for 遍历数组 2 v-for 遍历对象 3, v-for使用过程中添加key 4 哪些数组是响应式的1...

  • vue第二章

    v-for循环,可以遍历值和下标。 v-for=''(vlaue,index)in对象名'' v-model 双向...

  • 单双行设置不同样式

    通过对单双行设置不同的class或者style实现。首先,是使用v-for,获取行的index: 然后,在styl...

网友评论

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

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