Vue中一个新闻类型的弹框Demo

1.设计弹框组件
首先,创建一个名为NewsPopup的弹框组件,用于显示新闻内容。组件的模板包括一个标题和新闻列表。

<template><div class="news-popup"><h2>{{ title }}</h2><ul><li v-for="news in newsList" :key="news.id"><h3>{{ news.title }}</h3><p>{{ news.description }}</p></li></ul><button @click="closePopup">关闭</button></div>
</template><script>
export default {props: {title: String, // 弹框标题newsList: Array // 新闻列表},methods: {closePopup() {this.$emit('close'); // 触发关闭事件}}
}
</script><style scoped>
.news-popup {background: #fff;padding: 20px;
}
</style>

 当然,这里的模板只是一个小Demo,比较粗糙,实际中具体的需求还得根据各位的需要去调整。比如,你想将这里的关闭按钮功能换成通过点击图标去关闭也是可以的。例如:

<i class="el-icon-circle-close" @click="具体的方法"></i>

 这里用到了elment-ui组件库中的图标。

2.在父组件中引用弹窗组件 

<template><div><button @click="showPopup = true">显示新闻弹框</button><news-popup v-if="showPopup" :title="popupTitle" :newsList="popupNewsList" @close="showPopup = false"></news-popup></div>
</template><script>
import NewsPopup from './NewsPopup'export default {components: {NewsPopup},data() {return {showPopup: false,popupTitle: '',popupNewsList: []}},methods: {loadNews() {// 发送请求获取新闻数据// 以下为示例数据this.popupTitle = '最新新闻';this.popupNewsList = [{ id: 1, title: '新闻标题1', description: '新闻内容1' },{ id: 2, title: '新闻标题2', description: '新闻内容2' },{ id: 3, title: '新闻标题3', description: '新闻内容3' }];}}
}
</script>

在上述代码中,通过showPopup变量控制弹框的显示与隐藏,通过@close事件监听关闭按钮的点击事件,并将showPopup设置为false来关闭弹框。loadNews()方法用于加载新闻数据,在示例中直接在方法内给popupTitlepopupNewsList赋值,实际应用中可以根据实际情况发送异步请求获取数据。

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

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

相关文章

Docker中容器数据卷

容器数据卷 一.什么是容器数据卷二.使用数据卷方式一&#xff1a;直接使用命令来挂载 -v 三.具名和匿名挂载 一.什么是容器数据卷 docker理念 将应用和环境打包成一个镜像&#xff01; 数据&#xff1f;如果数据都在容器中&#xff0c;那么我们的容器删除&#xff0c;数据就会…

【Linux操作系统】Ubuntu和center两个Linux发行版本中指令的区别

Ubuntu和center是Linux的两个发行版本&#xff0c;本文将详细介绍两个发行版的使用命令区别&#xff0c;分析两者的优缺点。 文章目录 常见的区别&#xff1a;细节差异&#xff1a;两个发行版本各自的优点和缺点Ubuntu 的优点&#xff1a;Ubuntu 的缺点&#xff1a;CentOS 的优…

Vue中的组件渲染

在Vue中&#xff0c;组件的被渲染意味着将组件的内容转换为真实的DOM元素并添加到页面上。当Vue应用启动时&#xff0c;根组件会被渲染&#xff0c;并递归地渲染其子组件。 当组件被渲染时&#xff0c;Vue会将组件的模板解析成虚拟DOM&#xff08;Virtual DOM&#xff09;的形…

oracle 19c打补丁遭遇OPATCHAUTO-72043OPATCHAUTO-68061

最近&#xff0c;在AIX上的新装oracle 19C数据库基础版本&#xff0c;使用opatchauto打PSU补丁集35037840时遇到了OPATCHAUTO-72043报错&#xff0c;无法正常应用GI补丁。 一、环境描述 操作系统&#xff1a;AIX 数据库版本&#xff1a;oracle rac 19.3.0新装基础版 应用PS…

2023拒绝内卷!两年转行网络安全真实看法!

我目前转行网络安全两年&#xff0c;没啥天分&#xff0c;全靠努力&#xff0c;基本能够得上中级的水平了。看到大家对转行网络安全挺感兴趣&#xff0c;也有挺多争议&#xff0c;想把我的建议和经验告诉大家。 有很多人觉得网络安全已经饱和了&#xff0c;现在选择这个工作&a…

Spring Boot : ORM 框架 JPA 与连接池 Hikari

数据库方面我们选用 Mysql &#xff0c; Spring Boot 提供了直接使用 JDBC 的方式连接数据库&#xff0c;毕竟使用 JDBC 并不是很方便&#xff0c;需要我们自己写更多的代码才能使用&#xff0c;一般而言在 Spring Boot 中我们常用的 ORM 框架有 JPA 和 Mybaties &#xff0c;本…

面试之多线程案例(四)

1.单例模式 单例模式是指在内存中只会创建且仅创建一次对象的设计模式。在程序中多次使用同一个对象且作用相同时&#xff0c;为了防止频繁地创建对象使得内存飙升&#xff0c;单例模式可以让程序仅在内存中创建一个对象&#xff0c;让所有需要调用的地方都共享这一单例对象。…

【洛谷 P5707】【深基2.例12】上学迟到 题解(时间计算)

【深基2.例12】上学迟到 题目描述 学校和 yyy 的家之间的距离为 s s s 米&#xff0c;而 yyy 以 v v v 米每分钟的速度匀速走向学校。 在上学的路上&#xff0c;yyy 还要额外花费 10 10 10 分钟的时间进行垃圾分类。 学校要求必须在上午 8:00 \textrm{8:00} 8:00 到达&…

[React]生命周期

前言 学习React&#xff0c;生命周期很重要&#xff0c;我们了解完生命周期的各个组件&#xff0c;对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1、getDefaultProps() 设置默认的props&#xff0c;也可以用duf…

【数据结构】实现单链表的增删查

目录 1.定义接口2.无头单链表实现接口2.1 头插addFirst2.2 尾插add2.3 删除元素remove2.4 修改元素set2.5 获取元素get 3.带头单链表实现接口3.1 头插addFirst3.2 尾插add3.3 删除元素remove3.4 判断是否包含元素element 1.定义接口 public interface SeqList<E>{//默认…

关于拓扑排序

又重新学了一下拓扑排序&#xff0c;这次发现就十分简单了&#xff0c;拓扑排序的步骤 1.他必须是一个有向无环图&#xff0c;起点我们就是入度为0的点 2.我们首先要输出的就是入度为0的点&#xff0c;然后依次删除这些点连向的点&#xff0c;使这些点的入度-1&#xff0c;如果…

ubuntu 有 1 个软件包没有被完全安装或卸载

ubuntu 有 1 个软件包没有被完全安装或卸载&#xff0c;安装时出现问题&#xff0c;一直卡在 rti-connext-dds-5.3.1 安装问题上。 下面是我安装 sqlite3 出现的问题&#xff1a; sukaiG7-7500:~/1/111/workspace_ros_car_noetic$ sudo apt-get install sqlite3 正在读取软件…

Java集合数组相互转换

1.集合转换成数组 &#xff08;1&#xff09;集合a通过toArray()方法进行转换为数组&#xff0c;可以转换成为指定类型的数组&#xff0c;但是这些类型都必须是object类型的子类&#xff0c;基本类型不可以。 必要时我们使用强制类型转换&#xff0c;转成我们需要的类型。 Li…

运维工程师第二阶段linux基础

文章目录 linux基础1.linux发展史--前身unix2.linux特点3.linux操作系统安装4.linux基础操作5.shell与终端6.Linux基础命令使用管理员找回密码linux的目录和管理1.根目录下目录结构及作用文件类型2.基本的目录管理命令查看基本的文件管理命令重定向① 几个概念② Linux打包操作…

葡萄叶病害数据集

1.数据集 分成训练集和测试集 训练集有四个文件夹 第一个文件夹为 Grape Black Measles&#xff08;葡萄黑麻疹&#xff09;病害&#xff08;3783张&#xff09; Grape Black rot葡萄黑腐病病害数据集&#xff08;3596张&#xff09; Grape Healthy 健康葡萄叶&#xff08;25…

Maven项目解决cannot resolve plugin maven-deploy-plugin:2.7

导入maven项目后&#xff0c;编辑的时候提示一些插件加载失败&#xff01;大概率是你的网络有问题&#xff0c;插件下载失败。 如下图&#xff1a;&#xff08;网络突然好了&#xff0c;我想截图但是没有复现&#xff0c;用网上找到的截图代替&#xff0c;明白意思就行&#x…

解决外部主机无法访问Docker容器的方法

使用Docker启动了一个tomcat容器&#xff0c;并做了端口映射&#xff0c;但是外部主机仍然无法访问。 编辑centos上的配置文件 vi /etc/sysctl.conf net.ipv4.ip_forward1 systemctl restart network保存以后即可生效&#xff0c;这个配置是开启linux的ip数据包转发功能&#…

Anaconda创建虚拟环境

参考文章 1 Win10RTX3060配置CUDA等深度学习环境 pytorch 管网&#xff1a;PyTorch 一 进入 Anaconda 二 创建虚拟环境 conda create -n pytorch python3.9注意要注意断 VPN切换镜像&#xff1a; 移除原来的镜像 # 查看当前配置 conda config --show channels conda config…

4-百度地图

4-百度地图 一 百度地图 1 前期准备 H5端和PC端,对接百度提供JavaScript API。 移动端,对接百度android SDK或ios SDK (1)打开百度地图开放平台 地址:https://lbsyun.baidu.com/ (2)选中开发文档——JavaScript Api 按照文档步骤开通百度开放平台并申请密钥 2 展示地…

Java多线程(四)

目录 一、线程的状态 1.1 观察线程的所有状态 1.2 线程状态和状态转移的意义 1.2.1 NEW、RUNNABLE、TERMINATED状态转换 1.2.2 WAITING、BLOCKED、TIMED_WAITING状态转换 1.2.3 yield()大公无私让出cpu 一、线程的状态 1.1 观察线程的所有状态 public class Demo9 {public st…