vue3瀑布流布局(使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的)

使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的,这是Vue.js推荐的代码组织方式。单文件组件通常包括三个主要部分:

  1. <template>:在这个部分中定义了组件的模板,也就是用户界面的结构和布局。这里使用了Vue的模板语法,包括v-for{``{ }}等指令和插值表达式。

  2. <script>:这个部分包含了组件的JavaScript逻辑。在Vue 3中,使用了setup()函数来设置组件的响应式数据和方法。

  3. <style>:这个部分定义了组件的样式,包括CSS规则和样式定义。

废话不多说直接上代码

复制代码
<template>
  <!-- 瀑布流容器 -->
  <div class="waterfall-container">
    <!-- 使用v-for循环遍历itemList中的项目 -->
    <div
      v-for="(item, index) in itemList"
      :key="index"
      class="waterfall-item"
    >
      <!-- 显示项目的图片 -->
      <img :src="item.imageSrc" alt="">
      <!-- 显示项目的标题 -->
      <h2>{{ item.title }}</h2>
      <!-- 显示项目的内容 -->
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用ref函数创建响应式数据,存储项目列表
    const itemList = ref([
      {
        imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
        title: '我是标题1',
        content: '我是内容1',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
        title: '我是标题2',
        content: '我是内容2',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
        title: '我是标题3',
        content: '我是内容3',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
        title: '我是标题4',
        content: '我是内容4',
      },
      {
        imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
        title: '我是标题5',
        content: '我是内容5',
      },
    ]);

    return {
      itemList, // 在setup函数中返回响应式数据
    };
  },
};
</script>

<style>
/* 设置瀑布流容器的样式 */
.waterfall-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 列宽自适应,最小300px,平均分配宽度 */
  gap: 20px; /* 项目之间的间隔 */
}

/* 设置项目样式,如背景色和阴影 */
.waterfall-item {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

/* 设置图片样式,使其适应容器宽度 */
img {
  max-width: 100%;
  height: auto;
}
</style>
相关推荐
百思可瑞教育4 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
华仔啊7 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
IT古董9 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
百思可瑞教育12 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e12 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
知识分享小能手16 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
朗迹 - 张伟16 小时前
Gin-Vue-Admin学习笔记
vue.js·学习·gin
古夕16 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
武昌库里写JAVA16 小时前
Java设计模式中的几种常用设计模式
vue.js·spring boot·sql·layui·课程设计