Vue scrolling messages across the screen, how to click up and down to switch messages?

html part

<div class="notice_index">
    <b></b>
    <div class="notice_box">
        <ul class="marquee_list" :class="{marquee_top:animate}">
            <li v-for="(item, index) in marqueeList">
                :
                <span style="color: -sharp999;">{{item.Title}}</span>
                <i style="color: -sharp999;">[ {{item.UpdateTime | moment("YYYY-MM-DD")}} ]</i>
            </li>
        </ul>
    </div>
    <div class="option">
       <button @click="up" ></button>
       <button @click="down" ></button>
    </div>
</div>

vue part

created() {
        setInterval(this.showMarquee, 5000)//5
}
methods: {
    showMarquee() {
        this.animate = true;
        setTimeout (() => {
            this.marqueeList.push (this.marqueeList[0]);
            this.marqueeList.shift ();
            this.animate = false;
         }, 1000);
     },
}

I want to know how to write up and down

Apr.28,2021

stop polling when you click, then scroll up or down once, and then turn on polling

Menu