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

Question

我是 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>

Answer 1

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

• 如果你想动态添加/删除类到一个元素，你可以使用v-bind:class的对象语法
• 如果需要动画/转场，可以使用Vue 转场（ transition / transition-group ）
• 如果您有许多相似的元素（例如，示例代码中的.trending-articles-names ），您可以使用v-for为您创建它们

一个完全在 vue 中实现的非常简单的轮播可能如下所示：
（codepen在这里可用）

 new Vue({ el: '#root', data: function() { return { articles: [{ name: "Lorem Ipsum", image: "https://via.placeholder.com/300x50.png/FF0000/FFFFFF?text=First" }, { name: "Lorem Ipsum 2", image: "https://via.placeholder.com/300x50.png/00FF00/FFFFFF?text=Second" }, { name: "Lorem Ipsum 3", image: "https://via.placeholder.com/300x50.png/0000FF/FFFFFF?text=Third" }], activeImage: 0, interval: null } }, mounted() { this.interval = setInterval(this.next, 5000); }, destroyed() { // remember to clear the interval once the component is no longer used clearInterval(this.interval); }, methods: { prev() { this.activeImage--; if (this.activeImage < 0) this.activeImage = this.articles.length - 1; }, next() { this.activeImage++; if (this.activeImage >= this.articles.length) this.activeImage = 0; }, pic(article) { console.log("CLICKED ON", article); } } });

 .carousel { overflow: hidden; width: 300px; display: flex; } .carousel img { transition: transform 0.5s ease; } button { margin: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <div class="trending col-4"> <div class="trending-div"> <div class="trending-articles"> <div v-for="(article, idx) in articles" :key="idx" class="trending-articles-names" @click="activeImage = idx">{{article.name}}</div> </div> <div class="carousel"> <img v-for="(article, idx) in articles" :key="idx" @click="pic(article)" :src="article.image" :style="{transform: `translateX(-${activeImage * 100}%)`}" /> </div> <button type="button" @click="prev">PREV</button> <button type="button" @click="next">NEXT</button> </div> </div> </div>

不过，我建议在生产项目中使用预制的轮播组件。
vue 中有几个不错的可用于轮播的库，仅举几例：

• Vuetify Carousels （Vuetify 是一个基于材料设计的 vue 框架）
• vue-carousel （一个轻量级的轮播组件）
• bootstrap-vue 轮播（基于 boostrap）