问题：使用Vue3实现swiper照片轮播，只显示第一张图片

最新推荐文章于 2023-12-27 11:09:29 发布

小XiaXia

最新推荐文章于 2023-12-27 11:09:29 发布

阅读量1k

点赞数

分类专栏：问题 Vue框架文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_51055743/article/details/125376333

版权

Vue框架同时被 2 个专栏收录

14 篇文章

订阅专栏

问题

3 篇文章

订阅专栏

这篇博客探讨了如何将 Vue2 中在 mounted 生命周期钩子中初始化 Swiper 的逻辑迁移到 Vue3 的 onUpdated 钩子。作者详细展示了 Vue3 中的 setup 函数内如何创建和配置 Swiper 实例，以确保组件更新后的正确运行。这是一个关于 Vue 框架升级和组件生命周期理解的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决:在onUpdated中实现swiper配置
(原来在Vue2中是在mounted配置的）
vue3

//vue3
setup(){
//省略。。。。。
    onUpdated(()=>{
        var swiper = new Swiper("#musicSwiper", {
            pagination: {
            el: ".swiper-pagination",
            clickable: true,
            },
        });
    })
    return{
        
    }
}

data:function(){
    return{
   
    }
},
async mounted(){
        var swiper = new Swiper("#musicSwiper", {
            pagination: {
            el: ".swiper-pagination",
            clickable: true,
            },
        });
}