【VUE】图片切换——vi-show，数组 

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        button {
            width: 15px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgba(255, 255, 255, .3);
        }
        
        #app {
            position: relative;
        }
        
        .next,
        .pre {
            position: absolute;
            top: 0;
        }
        
        .next {
            right: 0;
        }
        
        .pre {
            left: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <img :src="arr[index]" alt="">
        <!-- v-show妙用 -->
        <button class="next" @click="next" v-show="index<arr.length-1">&gt;</button>
        <button class="pre" @click="pre" v-show="index!=0">&lt;</button>
    </div>
    <script>
        var area = new Vue({
            el: "#app",
            data: {
                index: 1,
                arr: ["pic1.png", "pic2.png"]
            },
            methods: {
                next: function() {
                    this.index++;
                },
                pre: function() {
                    this.index--;
                }
            }
        })
    </script>
</body>

</html>
posted @ 2021-04-05 16:37  ice猫猫3  阅读(143)  评论(0)  编辑  收藏  举报