Vue3自定义文章列表组件

一、Vue3的代码展示

<template><div><div v-for="article in articles" :key="article.id" class="article-card"><div class="author-info"><img :src="article.avatar" alt="Author Avatar" class="avatar" /><div class="author-details"><span class="author-name">{{ article.username }}</span><span class="publish-time">{{ article.createTime }}</span></div></div><div class="article-details"><h3 class="article-title">{{ article.title }}</h3><p class="article-info">{{ article.summary }}</p></div><div class="article-stats"><span class="stat-item">查看数: {{ article.viewCount }}</span><span class="stat-item">点赞数: {{ article.likeCount }}</span><span class="stat-item">评论数: {{ article.commentCount }}</span></div></div></div>
</template>
<script setup>
const props = defineProps(['articles']);
</script>
<style scoped>
.article-card {border: 1px solid #ddd;padding: 16px;display: flex;flex-direction: column;align-items: flex-start;transition: background-color 0.3s; /* 添加过渡以实现平滑的颜色变化 */
}.article-card:hover {background-color: #fafafa; /* 在悬停时改变背景颜色 */
}.author-info {display: flex;align-items: center;margin-bottom: 8px;
}.avatar {width: 40px;height: 40px;border-radius: 50%;margin-right: 8px;
}.author-details {display: flex;align-items: baseline;
}.author-name {font-weight: bold;margin-right: 4px;
}.publish-time {color: #888;margin-left: 20px;
}.article-details {margin-bottom: 12px;display: flex;flex-wrap: wrap;flex-direction: column;/*background-color: #3fdbf0;*/text-align: left; /* Align content to the left */
}.article-title {margin-bottom: 2px;font-size: 20px;
}.article-info {color: #555;margin-bottom: 8px;font-size: 16px;
}.article-stats {display: flex;justify-content: space-between;color: #888;
}.stat-item {margin-right: 12px; 
}
</style>

二、 代码解读

HTML 模板部分:

  1. <template> 标签是 Vue.js 模板的开始。
  2. v-for="article in articles" 遍历 articles 数组中的每个 article
  3. :key="article.id" 用于标识每个循环中的元素,以便 Vue 可以高效地更新 DOM。
  4. class="article-card" 定义了一个文章卡片的样式。
  5. v-bind 用于动态地绑定元素的属性,例如 :src="article.avatar" 将文章作者的头像与 article.avatar 数据绑定。
  6. {{ expression }} 用于在模板中插入表达式的值。

JavaScript 部分:

  1. <script setup> 是 Vue 3 提供的新语法,用于编写组件的逻辑部分。
  2. const props = defineProps(['articles']); 用于声明接收来自父组件的 articles 属性。

CSS 部分:

  1. <style scoped> 表示样式仅对当前组件起作用。
  2. 样式定义了文章卡片的整体样式,作者信息的样式,文章详情的样式,以及文章统计信息的样式。
  3. :hover 选择器用于在鼠标悬停时改变文章卡片的背景颜色。
  4. 通过样式定义了作者头像、作者姓名、发布时间、文章标题、文章摘要等的样式。

三、结果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710857.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考52-上午题-【数据库】-关系模式2

一、关系模式的回顾 见&#xff1a;软考38-上午题-【数据库】-关系模式 二、关系模式 2-1、关系模式的定义 示例&#xff1a; 念法&#xff1a;A——>B A决定B&#xff0c;或者&#xff0c;B依赖于A。 2-2、函数依赖 1、非平凡的函数依赖 如果X——>Y&#xff0c;&a…

Linux Shell脚本练习(三)

1、测试用户名与密码是否正确。 2、输出1-1000内的素数。 3、对 100 以内的所有正整数相加求和(1234...100)。 4、输出9*9 乘法表。 5、编写脚本,显示进度条。 、 6、输入三个数并进行升序排序

CSS-浮动,定位

1. 浮动 (float) CSS的定位机制有三种&#xff1a;普通流(标准流)&#xff0c;浮动和定位。 普通流就是一个网页内标签元素正常从上到下&#xff0c;从左到右排列顺序的意思&#xff0c;比如块级元素会独占一行&#xff0c;行内元素会按顺序依次前后排列&#xff1b;按照这种大…

佛山50公里徒步组团|真北敏捷社区佛山敏捷DevOps社区

真北敏捷社区&佛山敏捷DevOps社区有两个宗旨&#xff0c;一是求知&#xff0c;二是连接。连接有识之士&#xff0c;同修友士之识。峨峨乎高山&#xff0c;洋洋乎流水。谈笑有鸿儒&#xff0c;往来无白丁。 《柳叶刀》上的研究显示&#xff0c;运动的情绪价值&#xff0c;相…

数据结构之树结构(下)

各种各样的大树 平衡二叉树 (AVL树) 普通二叉树存在的问题 左子树全部为空&#xff0c;从形式上看&#xff0c;更像一个单链表 插入速度没有影响 查询速度明显降低&#xff08;因为需要依次比较&#xff09;&#xff0c;不能发挥BST的优势&#xff0c;因为每次还需要比较左子…

javaWeb个人学习04

AOP核心概念: 连接点: JoinPoint, 可以被AOP控制的方法 通知: Advice 指哪些重复的逻辑&#xff0c;也就是共性功能(最终体现为一个方法) 切入点: PointCut, 匹配连接点的条件&#xff0c;通知仅会在切入点方法执行时被应用 目标对象: Target, 通知所应用的对象 通知类…

docker基线安全修复和容器逃逸修复

一、docker安全基线存在的问题和修复建议 1、将容器的根文件系统挂载为只读 修复建议&#xff1a; 添加“ --read-only”标志&#xff0c;以允许将容器的根文件系统挂载为只读。 可以将其与卷结合使用&#xff0c;以强制容器的过程仅写入要保留的位置。 可以使用命令&#x…

航拍无人机技术,航拍无人机方案详解,无人机摄影技术

航拍无人机是利用遥控技术和摄像设备&#xff0c;在空中进行拍摄和录像的无人机。这种无人机通常具有高清摄像设备、图像传输设备、GPS定位系统、智能控制系统等&#xff0c;可以轻松实现各种拍摄角度和高度&#xff0c;广泛应用于影视制作、旅游景区航拍、城市规划、环保监测等…

【数据结构与算法】回溯法解题20240301

这里写目录标题 一、78. 子集1、nums [1,2,3]为例把求子集抽象为树型结构2、回溯三部曲 二、90. 子集 II1、本题搜索的过程抽象成树形结构如下&#xff1a; 三、39. 组合总和1、回溯三部曲2、剪枝优化 四、LCR 082. 组合总和 II1、思路2、树形结构如图所示&#xff1a;3、回溯…

用vivado创建一个赛灵思AXI的IP核

一、新建一个管理IP的任务 二、设置板子&#xff0c;verilog语言和文件位置 三、创建新的IP核 添加一个axi-full的master接口和axi-full的slave接口 四、查看赛灵思AXI代码 第一个是axi的master接口代码&#xff0c;下面的是axi的slave接口代码 五、打包IP核以供后续使用 六、…

出现 ‘vue‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件的解决方法(图文界面)

目录 前言1. 问题所示2. 原理分析3. 解决方法前言 由于Java转全栈,对此前端的细节点都比他人更加注意,所以此处记录更有用的信息!(小白都能看懂) 1. 问题所示 出现如下问题: F:\vue_project>vue -version vue 不是内部或外部命令,也不是可运行的程序 或批处理文件…

基于Python的电商评论数据采集与分析|电商API接口数据采集

引言 在电商竞争日益激烈的情况下&#xff0c;商家既要提高产品质量&#xff0c;又要洞悉客户的想法和需求&#xff0c;关注客户购买商品后的评论&#xff0c;而第三方商家获取商品评价主要依赖于人工收集&#xff0c;不但效率低&#xff0c;而且准确度得不到保障。通过使用Py…

鸿蒙 渲染控制

前提&#xff1a;基于官网3.1/4.0文档。参考官网文档 基于Android开发体系来进行比较和思考。&#xff08;或有偏颇&#xff0c;自行斟酌&#xff09; 1.概念 ArkUI通过自定义组件的build()函数和builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了…

Ps:绘画对称功能

Photoshop 中的绘画对称 Paint Symmetry功能允许用户在画布上创建对称的绘画和设计&#xff0c;极大地提高了创作的效率和准确性&#xff0c;尤其适合于制作复杂的对称图形和图案。 可在使用画笔工具、铅笔工具或橡皮擦工具时启用“绘画对称"功能。 提示&#xff1a; 绘画…

Cocos游戏开发中的金币落袋效果

引言 Cocos游戏开发中的金币落袋效果 大家好,不知道大家有没有被游戏中的一些小细节打动或吸引。 往往游戏就是通过一些与众不同的细节,去留住玩家。 金币落袋效果正是如此,它比普通的数值变化来得更加形象,给予玩家成就感和满足感。 本文重点给大家介绍一下如何在Coc…

Opencv基本操作 (上)

目录 图像基本操作 阈值与平滑处理 图像阈值 图像平滑处理 图像形态学操作 图像梯度计算 Sobel 算子 Canny 边缘检测 图像金字塔与轮廓检测 图像轮廓 接口定义 轮廓绘制 轮廓特征与相似 模板匹配 傅里叶变换 傅里叶变换的作用 滤波 图像基本操作 读取图像&…

【Maven】Maven 基础教程(二):Maven 的使用

《Maven 基础教程》系列&#xff0c;包含以下 2 篇文章&#xff1a; Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置Maven 基础教程&#xff08;二&#xff09;&#xff1a;Maven 的使用 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#…

Qt中关于信号与槽函数的思考

信号与槽函数的思考 以pushbutton控件为例&#xff0c;在主界面上放置一个pushbutton控件&#xff0c;点击右键选择关联槽函数&#xff0c;关联一个click函数&#xff0c;如下图所示&#xff1a; 在该函数中&#xff0c;实现了一个点击pushbutton按钮后&#xff0c;弹出一个窗…

go并发模式之----使用时顺序模式

常见模式之二&#xff1a;使用时顺序模式 定义 顾名思义&#xff0c;起初goroutine不管是怎么个先后顺序&#xff0c;等到要使用的时候&#xff0c;需要按照一定的顺序来&#xff0c;也被称为未来使用模式 使用场景 每个goroutine函数都比较独立&#xff0c;不可通过参数循环…

DOM 获取父子节点

DOM 是以树状结构排列的&#xff0c;所以父子关系是相对的&#xff0c;当li为我们的目标节点的时候&#xff0c;ul为其父节点&#xff0c;其他li为它的兄弟节点&#xff0c;li里面包含的标签为子节点&#xff0c;以此类推。 那我们如何找父节点&#xff1f; 元素.parentNode&am…