如何用vue写一个文字消息轮播列表(纯前端实现)

最新推荐文章于 2024-06-12 18:05:30 发布

程序员的修仙之路

最新推荐文章于 2024-06-12 18:05:30 发布

阅读量8.6k

点赞数 5

分类专栏：前端大佬养成记文章标签： vue 消息列表轮播定时轮播动态消息轮播

本文链接：https://blog.csdn.net/weixin_43829161/article/details/103261728

版权

效果展示
其中用到的知识点：vue框架包括v-for、v-if语法，element手脚架，setInterval()定时循环执行函数，setTimeout()延时函数
具体实现方法：首先我们分析需要显示的数据类型，通常情况我们这里需要显示的是一个json数组中的数据，

noticeManage: [
        {
    index: 1, message: '会议通知', time: '2019-11-27' },
        {
    index: 2, message: '电梯故障通知', time: '2019-11-27' },
        {
    index: 3, message: '停车通知', time: '2019-11-27' },
        {
    index: 4, message: '停水通知', time: '2019-11-27' },
        {
    index: 5, message: '社区互动', time: '2019-11-27' },
        {
    index: 6, message: '会议通知', time: '2019-11-27' },
        {
    index: 7, message: '电梯故障通知', time: '2019-11-27' },
        {
    index: 8, message: '停车通知', time: '2019-11-27' },
        {
    index: