1、在 src 目录下创建 component文件夹，在文件夹中创建 vue文件。

2、在 Vue文件中写入以下内容

<div class="pubu">
    <div class="left">
      <div class="pubu-item" v-for="item in left" :key="item.id">
        <img
          @error="isError($event)"
          :src="store.state.url + item.img"
          alt=""
        />
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
    <div class="right">
      <div class="pubu-item" v-for="item in right" :key="item.id">
        <img
          @error="isError($event)"
          :src="store.state.url + item.img"
          alt=""
        />
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>

3、在需要使用的页面中引入这个组件

import Waterfall from "@/components/Waterfall.vue";

<template>
  <Waterfall v-if="data.president.length > 0":lists="data.president"></Waterfall>
</template>

4、最终效果：

原创作者：吴小糖

创作时间：2023.10.12