在vue中如何将四张图片排成一排并且在下面写上名字

你可以使用Vue的flex布局来实现将四张图片排成一排的效果，并在下面写上名字。具体实现步骤如下：

1. 在Vue组件中，使用flex布局来实现四张图片排成一排的效果。可以通过设置display:flex和flex-wrap:nowrap来实现。

2. 在每张图片的下面添加一个文本框，用来显示名字。可以通过设置position:absolute和bottom:0来实现文本框在图片下方的效果。

3. 在Vue组件中，使用v-for指令来循环渲染图片和名字。可以将图片和名字的数据存储在一个数组中，然后使用v-for指令将数组中的数据渲染到页面上。

下面是一个示例代码：

<template>
  <div class="image-list">
    <div class="image-item" v-for="(item, index) in imageList" :key="index">
      <img :src="item.imageUrl" alt="">
      <div class="name">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        {
          imageUrl: 'https://example.com/image1.jpg',
          name: 'Image 1'
        },
        {
          imageUrl: 'https://example.com/image2.jpg',
          name: 'Image 2'
        },
        {
          imageUrl: 'https://example.com/image3.jpg',
          name: 'Image 3'
        },
        {
          imageUrl: 'https://example.com/image4.jpg',
          name: 'Image 4'
        }
      ]
    }
  }
}
</script>

<style>
.image-list {
  display: flex;
  flex-wrap: nowrap;
}

.image-item {
  position: relative;
  margin-right: 20px;
}

.name {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  background-color: black;
  color: white;
  opacity: 0.7;
  font-size: 14px;
  padding: 5px;
}
</style>

这样就可以实现将四张图片排成一排并在下面写上名字的效果了。