zoukankan      html  css  js  c++  java
  • 【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 {
                 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>
    
  • 相关阅读:
    springboot运行在eclipse报异常的问题
    Python random模块
    MySQL大小写敏感
    正则表达式详解
    Linux grep命令详解
    Linux printf命令详解
    Linux awk命令详解
    MySQL表介绍
    Linux sed命令详解
    Linux grep命令详解
  • 原文地址:https://www.cnblogs.com/icemiaomiao3/p/14618720.html
Copyright © 2011-2022 走看看