在使用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
网友评论