<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.css">
    <style>
         .swiper-container {
            width:100%;
            height:300px;
        }
        .box0 {
           background-color: red;
        }

        .box1 {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <new-swiper>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" :class = "index > 0 ? 'box1' :'box0'"  v-for="(t,index) in title">{{t}}</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </new-swiper>
    </div>
</body>
</html>

<script src="node_modules/swiper/dist/js/swiper.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//js部分

    //创建模板
    let newSwiper = {
        template : `<div><slot></slot></div>`,
        //在vue生命周期挂载完成时初始化weiper
        mounted(){
                new Swiper(".swiper-container",{
                    direction:"horizontal",
                    loop : true,
                     pagination: {
                          el: '.swiper-pagination',
                        }
                })
            }
    }

    new Vue({
        el : "#app",
        components : {
            newSwiper
        },
        data : {
            title : ["t1","t2"]
        },
    })





</script>
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue