简单的图片列表排序

最新推荐文章于 2024-08-09 21:25:57 发布

one、two、three，go

最新推荐文章于 2024-08-09 21:25:57 发布

阅读量417

点赞数 9

文章标签：数据库前端

本文链接：https://blog.csdn.net/m0_71337486/article/details/135698757

版权

该篇文章介绍了如何在Vue组件中使用JavaScript的slice方法对图片数组进行切片，以展示不同的图片组别，如第一组、第二组等。

摘要由CSDN通过智能技术生成

<template>
<div class='no-rule'>
  <div class="imgs ">
    <div v-for="(img, index) in first" :key="index" >
      <img :src="img" alt="">
    </div>
  </div>
  <div class="second imgs">
    <div v-for="(img, index) in second" :key="index" >
      <img :src="img" alt="">
    </div>
  </div>

  <div class="imgs third">
    <div v-for="(img, index) in third" :key="index" >
      <img :src="img" alt="">
    </div>
  </div>

  <div class="fourth imgs">
    <div v-for="(img, index) in fourth" :key="index" >
      <img :src="img" alt="">
    </div>
  </div>
  
</div>
</template>

<script>

export default {
components: {},
data() {
return {
  images: [
    'https://images.chuoooo.com/paint/20240119/cdb30dea11667122ef3476cb6e5dc38d.jpg',
    'https://images.chuoooo.com/paint/20240119/311a5391c9ba7eda104ba545edbb0611.jpg',
    'https://images.chuoooo.com/paint/20240119/14cb86974a4547e8046f7a54013b41ee.png',
    'https://images.chuoooo.com/paint/20240117/bb2f4975253c6e950fc9661ceb6fdcff.jpg',
    'https://images.chuoooo.com/paint/20240119/cdb30dea11667122ef3476cb6e5dc38d.jpg',
    'https://images.chuoooo.com/paint/20240119/311a5391c9ba7eda104ba545edbb0611.jpg',
    'https://images.chuoooo.com/paint/20240119/14cb86974a4547e8046f7a54013b41ee.png',
    'https://images.chuoooo.com/paint/20240117/bb2f4975253c6e950fc9661ceb6fdcff.jpg',
    'https://images.chuoooo.com/paint/20240119/cdb30dea11667122ef3476cb6e5dc38d.jpg',
    'https://images.chuoooo.com/paint/20240119/311a5391c9ba7eda104ba545edbb0611.jpg',
    'https://images.chuoooo.com/paint/20240119/14cb86974a4547e8046f7a54013b41ee.png',
    'https://images.chuoooo.com/paint/20240117/bb2f4975253c6e950fc9661ceb6fdcff.jpg',
    'https://images.chuoooo.com/paint/20240119/cdb30dea11667122ef3476cb6e5dc38d.jpg',
    'https://images.chuoooo.com/paint/20240119/311a5391c9ba7eda104ba545edbb0611.jpg',
    'https://images.chuoooo.com/paint/20240119/14cb86974a4547e8046f7a54013b41ee.png',
    'https://images.chuoooo.com/paint/20240117/bb2f4975253c6e950fc9661ceb6fdcff.jpg',
    'https://images.chuoooo.com/paint/20240119/cdb30dea11667122ef3476cb6e5dc38d.jpg',
    'https://images.chuoooo.com/paint/20240119/311a5391c9ba7eda104ba545edbb0611.jpg',
    'https://images.chuoooo.com/paint/20240119/14cb86974a4547e8046f7a54013b41ee.png',
    'https://images.chuoooo.com/paint/20240117/bb2f4975253c6e950fc9661ceb6fdcff.jpg',
  ],
  first: [],
  second: [],
  third: [],
  fourth: [],
};
},
computed: {},
watch: {},
methods: {
  handleSlice() {
    this.first = this.images.slice(0, 5); // 截取索引0到3的元素，即第一组图片
    this.second = this.images.slice(5, 10); // 截取索引4到7的元素，即第二组
    this.third = this.images.slice(10, 15); // 截取索引8到11的元素，即第三组
    this.fourth = this.images.slice(15); // 截取索引12到最后的所有元素，即第四组
  },
},
created() {

},

mounted() {
  this.handleSlice()
},

beforeCreate() {}, 
beforeMount() {}, 
beforeUpdate() {}, 
updated() {
}, 
beforeDestroy() {}, 
destroyed() {},
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.no-rule {
  display: flex;
  flex-wrap: wrap;

}

.imgs {
    width: 25%;

  }

  img {
    width: 100%;
    overflow: hidden;
  }

  .fourth {
    background-color: skyblue;
  }
  .third {
    background-color: pink;
  }

  .second {
    background-color: red;
  }
</style>