vue实现向上滚动消息

1.首先，在Vue组件中，需要定义一个data属性，用来存储消息列表和当前展示的消息索引：

data() {
    return {
        messages: ['这是第一条消息', '这是第二条消息', '这是第三条消息'],
        currentIndex: 0
    }
}

2.然后，在模板中，使用Vue的计算属性来获取当前展示的消息：

computed: {
    currentMessage() {
        return this.messages[this.currentIndex]
    }
}

3.接下来，使用Vue的定时器方法setInterval()，每隔一段时间更新当前展示的消息索引，实现消息向上滚动的效果：

mounted() {
    setInterval(() => {
        this.currentIndex++
        if (this.currentIndex >= this.messages.length) {
            this.currentIndex = 0
        }
    }, 2000)
}

4.最后，在模板中，将当前展示的消息渲染到页面上：

<template>
    <div>
        <p>{{ currentMessage }}</p>
    </div>
</template>

完整代码：

<template>
    <div>
        <p>{{ currentMessage }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            messages: ['这是第一条消息', '这是第二条消息', '这是第三条消息'],
            currentIndex: 0
        }
    },
    computed: {
        currentMessage() {
            return this.messages[this.currentIndex]
        }
    },
    mounted() {
        setInterval(() => {
            this.currentIndex++
            if (this.currentIndex >= this.messages.length) {
                this.currentIndex = 0
            }
        }, 2000)
    }
}
</script>