Vue 组件：图片 + 文字框，循环渲染填满网页

<template>
  <div class='wrapper'>
    <div class='box'>
      <img :src='imageUrl' alt='image' class='image'/>
      <div class='content'>
        <h2>{{ title }}</h2>
        <p>{{ description }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    }
  }
}
</script>
<style>
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 25%;
  margin: 1%;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}

.content {
  padding: 10px;
}
</style>
<p>父组件中应该有一个数据源，包含多个对象，每个对象都有一个图片链接，标题和描述。然后在父组件中使用 v-for 循环渲染子组件，以填满网页。</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;my-component v-for='(item, index) in items' :key='index' :image-url='item.imageUrl' :title='item.title' :description='item.description'/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      items: [
        {
          imageUrl: 'https://picsum.photos/id/237/200/300',
          title: 'Title 1',
          description: 'Description 1'
        },
        {
          imageUrl: 'https://picsum.photos/id/238/200/300',
          title: 'Title 2',
          description: 'Description 2'
        },
        {
          imageUrl: 'https://picsum.photos/id/239/200/300',
          title: 'Title 3',
          description: 'Description 3'
        },
        {
          imageUrl: 'https://picsum.photos/id/240/200/300',
          title: 'Title 4',
          description: 'Description 4'
        }
      ]
    }
  }
}
&lt;/script&gt;
</code></pre>