Javascript 如何使用Vue.js实现这一点？

我是Vue.js新手，因此我不确定正确执行此任务的正确方法。我期待着建立一个滑块，取代图像每4秒设置的时间间隔。现在它工作得很好，但我想使用Vue.js的全部功能来实现这一目标。我还想知道在卸载间隔时应该如何终止间隔，以避免内存泄漏

    <template>
    <div class="trending col-4">
        <div class="trending-div">
            <h1 class="headline">Trending</h1>
            <div class="trending-articles">
                <div class="trending-articles-names" @click="changeIamge">
                    <p class="trending-articles-names-number activeButton">1</p>
                    <p class="trending-articles-names-articleTitle activeBold">Lorem ipsum </p>
                </div>
                <div class="trending-articles-names" @click="changeIamge">
                    <p class="trending-articles-names-number">2</p>
                    <p class="trending-articles-names-articleTitle">Lorem, ipsum </p>
                </div>
                <div class="trending-articles-names" @click="changeIamge">
                    <p class="trending-articles-names-number">3</p>
                    <p class="trending-articles-names-articleTitle">Lorem ipsum </p>
                </div>
            </div>
            <div class="trending-carousel">
                <div @click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image active"></div>
                <div @click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image"></div>
                <div @click="pic" :style="{ backgroundImage: `url(path/to/image)`}" class="trending-carousel-image"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data: function() {
            return {
                counter: 0,

            }
        },
        mounted: function() {
            let carouselImages = document.querySelectorAll('.trending-carousel-image');
            let buttons = document.querySelectorAll('.trending-articles-names-number');
            let title = document.querySelectorAll('.trending-articles-names-articleTitle');
            setInterval(() => {
                carouselImages[this.counter].classList.remove("active")
                buttons[this.counter].classList.remove("activeButton")
                title[this.counter].classList.remove("activeBold")
                if(this.counter === 3) {
                    carouselImages[0].classList.add("active");
                    buttons[0].classList.add("activeButton");
                    title[0].classList.add("activeBold");
                    this.counter = 0;
                }else {
                    carouselImages[this.counter+1].classList.add("active");
                    buttons[this.counter+1].classList.add("activeButton");
                    title[this.counter+1].classList.add("activeBold");
                    this.counter++;
                }
            },4000);
        }
    }
</script>

趋向
1
Lorem ipsum
2
Lorem，ipsum
3
Lorem ipsum
导出默认值{
数据：函数（）{
返回{
柜台:0,，
}
},
挂载：函数（）{
让carouselImages=document.queryselectoral（“.trending carousel image”）；
let buttons=document.querySelectorAll（'.trending articles names number'）；
让title=document.querySelectorAll（'.trending articles names articletTitle'）；
设置间隔（（）=>{
carouselImages[this.counter].classList.remove（“活动”）
按钮[this.counter].classList.remove（“activeButton”）
标题[this.counter].classList.remove（“activeBold”）
if（this.counter==3）{
转盘图像[0]。类列表。添加（“活动”）；
按钮[0]。类列表。添加（“activeButton”）；
标题[0]。类列表。添加（“activeBold”）；
这个计数器=0；
}否则{
carouselImages[this.counter+1].classList.add（“活动”）；
按钮[this.counter+1].classList.add（“activeButton”）；
标题[this.counter+1].classList.add（“activeBold”）；
这个.counter++；
}
},4000);
}
}

使用vue时，应避免直接操作dom

• 如果要向元素动态添加/删除类，可以使用
• 如果需要动画/过渡，可以使用（

  过渡

  /

  过渡组

  ）
• 如果您有许多类似的元素（例如示例代码中的

  .trending articles names

  ），则可以使用创建它们

纯粹在vue中实现的非常简单的旋转木马可能如下所示：
（代码笔可用）

newvue({
el:'根'，
数据：函数（）{
返回{
文章：[{
名称：“Lorem Ipsum”，
图像：“https://via.placeholder.com/300x50.png/FF0000/FFFFFF?text=First"
}, {
名称：“Lorem Ipsum 2”，
图像：“https://via.placeholder.com/300x50.png/00FF00/FFFFFF?text=Second"
}, {
名称：“Lorem Ipsum 3”，
图像：“https://via.placeholder.com/300x50.png/0000FF/FFFFFF?text=Third"
}],
activeImage:0，
间隔：空
}
},
安装的（）{
this.interval=setInterval（this.next，5000）；
},
销毁（）{
//当部件不再使用时，请记住清除间隔
clearInterval（这个.interval）；
},
方法：{
prev（）{
此.activeImage--；
如果（this.activeImage<0）
this.activeImage=this.articles.length-1；
},
下一个（）{
这个.activeImage++；
if（this.activeImage>=this.articles.length）
this.activeImage=0；
},
图片（文章）{
日志（“点击”，文章）；
}
}
});
.carousel{
溢出：隐藏；
宽度：300px；
显示器：flex；
}
.旋转木马{
转型：转型0.5s轻松；
}
钮扣{
利润率：6px；
}

{{article.name}
上
下一个
你能准备一个JSFIDLE吗？@OzanKurt我试过了。它不好用谢谢，太好了@ISAAC np，很高兴我能帮忙：）