Vue.js 实现 3x3 图片布局：每排 3 张图片，相邻图片间距 3px

<template>
  <div class='image-container'>
    <div v-for='(image, index) in images' :key='index' class='image-wrapper'>
      <img :src='image' alt='Image'>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        'image4.jpg',
        'image5.jpg',
        'image6.jpg',
        'image7.jpg',
        'image8.jpg',
        'image9.jpg'
      ]
    }
  }
}
</script>
<style>
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-wrapper {
  margin: 10px;
}

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border: 3px solid #000;
}
</style>