使用 Vue 3 框架的单文件组件格式(Single-File Component)编写的,这是Vue.js推荐的代码组织方式。单文件组件通常包括三个主要部分:
-
<template>
:在这个部分中定义了组件的模板,也就是用户界面的结构和布局。这里使用了Vue的模板语法,包括v-for
、{``{ }}
等指令和插值表达式。 -
<script>
:这个部分包含了组件的JavaScript逻辑。在Vue 3中,使用了setup()
函数来设置组件的响应式数据和方法。 -
<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>