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>
相关推荐
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店1 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
别跟老夫聊头发1 小时前
vue缩放/放大时,实时更新/变换显示高度
vue.js
拾光拾趣录1 小时前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权1 小时前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598241 小时前
vue3源码解析:调度器
前端·vue.js
梦想CAD控件2 小时前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
bitbitDown2 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee1012 小时前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
借月3 小时前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js