vue3＜script setup＞瀑布流写法

锅盖哒

已于 2023-12-10 16:01:51 修改

阅读量79

点赞数

分类专栏：开发中一些常用的功能文章标签： javascript 前端开发语言

于 2023-11-29 13:49:24 首次发布

本文链接：https://blog.csdn.net/A12536365214/article/details/134687970

版权

开发中一些常用的功能专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了一个使用Vue.js编写的HTML模板，展示带有图片、标题和内容的列表，适合用于内容社区或博客展示。

摘要由CSDN通过智能技术生成

不想写步骤了，cv走用就行了

<template>
  <div>
    <div class="content">
      <div class="list" v-for="(item, index) in itemList" :key="index">
        <img class="image" :src="item.imageSrc" alt="item image">
        <div class="title">{{ item.title }}</div>
        <div class="con">{{ item.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const itemList = [
  {
    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',
  },
];
</script>

<style scoped>
.content {
  padding: 30rpx;
  box-sizing: border-box;
  column-count: 2;
}
.image {
  width: 100%;
  border-radius: 6rpx;
}
.title {
  margin-left: 15rpx;
  margin-right: 15rpx;
  font-size: 30rpx;
}
.con {
  margin: 15rpx;
  margin-top: 20rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  justify-content: space-between;
}
.list {
  break-inside: avoid;
  width: 330rpx;
  border: 1px solid #f4f4f4;
}
</style>