使用VUE做了简单的轮播图

最新推荐文章于 2023-10-04 17:09:17 发布

简简单单的前端

最新推荐文章于 2023-10-04 17:09:17 发布

阅读量201

点赞数

文章标签： vue.js javascript 前端学习

本文链接：https://blog.csdn.net/m0_46896340/article/details/124844001

版权

这是一个使用Vue.js实现的简单图片轮播组件。通过点击按钮，可以实现图片的前后切换。当图片索引达到边界时，会自动循环到另一端。代码中定义了`n`变量存储当前显示的图片索引，并通过`v-show`指令控制不同图片的显示。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h2>当前值：{{n}}</h2>
        <button @click="lBtn">点我上一张</button>
        <button @click="rBtn">点我下一张</button>
        <div v-show="n === 0"><img src="../img/0.png" alt=""></div>
        <div v-show="n === 1"><img src="../img/1.png" alt=""></div>
        <div v-show="n === 2"><img src="../img/2.png" alt=""></div>
    </div>

    <script src="../lib/vue.min.js"></script>
    <script>
        new Vue({
            el:'#root',
            data: {
                n:0
            },
            methods: {
                lBtn() {
                    if(this.n>0){
                        this.n--
                    }
                    else {
                        this.n = 2
                    }
                },
                rBtn() {
                    if(this.n<2){
                        this.n++
                    }
                    else {
                        this.n = 0
                    }
                }
            },
        })
    </script>
</body>
</html>