Vue js 样式绑定实践小作业(图片切换)

最新推荐文章于 2024-05-21 19:09:41 发布

blockchain beginner

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量122

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_45783437/article/details/127705356

版权

代码部分

<!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>图片切换</title>
    <link rel="stylesheet" href="./图片切换.css">
</head>
<div id="app">
    <div class="frame">
    <!-- 左箭头 -->
    <a href="javascript:void(0)" @click="prev" v-show="index!=0" class="left">
        <img src="./supercar/左箭头.png" alt="????">
    </a>
    <!-- 主图 -->
    <a href="" class="pt"><img :src="imgArr[index]" alt="???"></a>
    <!-- 右箭头 -->
    <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1" class="right">
        <img src="./supercar/右箭头.png" alt="">
    </a>
    </div>
</div>

<body>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "./supercar/1.jpg",
                    "./supercar/2.jpg",
                    "./supercar/3.jpg",
                    "./supercar/4.jpg",
                    "./supercar/5.jpg",
                    "./supercar/6.jpg",
                    "./supercar/7.jpg"
                ],
                index: 0
            },
            methods: {
                prev() {
                    this.index--;
                },
                next() {
                    this.index++;
                }
            }
        })
    </script>
</body>
</html>

效果图