vue实现多条通知公告循环播报

在Vue中实现多条通知公告循环播报，可以使用定时器来周期性地更新显示的公告。以下是一个简单的Vue组件例子：

<template>
  <div>
    <div v-if="notices.length">
      <p>{{ currentNotice }}</p>
    </div>
    <div v-else>
      <p>没有公告。</p>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      notices: ['通知1', '通知2', '通知3'], // 公告列表
      currentNoticeIndex: 0, // 当前显示的公告索引
      intervalId: null, // 定时器ID
      intervalTime: 3000, // 公告轮播间隔时间（毫秒）
    };
  },
  computed: {
    currentNotice() {
      return this.notices[this.currentNoticeIndex];
    },
  },
  methods: {
    startCycle() {
      this.intervalId = setInterval(() => {
        this.currentNoticeIndex = (this.currentNoticeIndex + 1) % this.notices.length;
      }, this.intervalTime);
    },
    stopCycle() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
  },
  mounted() {
    this.startCycle();
  },
  beforeDestroy() {
    this.stopCycle();
  },
};
</script>

在这个例子中，我们定义了一个notices数组来存储公告信息。currentNotice是一个计算属性，它根据currentNoticeIndex返回当前应该显示的公告。startCycle方法启动定时器，每隔一定时间更新currentNoticeIndex，实现公告的循环播报。stopCycle方法停止定时器。

组件被挂载（mounted）后，定时器开始工作；组件销毁（beforeDestroy）前，定时器被清除，避免了内存泄露。