Vue implements simple image switching effect

This article example shares the specific code of Vue to achieve simple image switching for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Image Switch</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #app{
           position: absolute;
           width: 100px;
           height: 100px;
           top: 100px;
           left: 400px;
        }

       #left{
           position: relative;
           top:-240px;
           left: -45px;
           font-size: 50px;
       }

       #right{
           position: relative;
           top: -300px;
           left: 595px;
           font-size: 50px;
       }

       a{
           color: black;
           text-decoration: none;
       }
    </style>
</head>
<body>
    <div id="app">
        <!-- Image to poll-->
      <img :src="imgArr[index]"/>
      <!-- Left Arrow -->
      <a href="javascript:void(0)" id="left" @click="prev" v-show="index!=0">《</a>
      <!-- Right Arrow -->
      <a href="javascript:void(0)" id="right" @click="next" v-show="index<imgArr.length-1">》</a>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr:[
                    "img/1.jpg",
                    "img/2.jpg",
                    "img/3.jpg",
                    "img/4.jpg",
                    "img/5.jpg",
                ],

                index: 0,

            },
            methods: {
                prev: function(){
                    this.index--;
                },
                next: function(){
                    this.index++;
                },
            }
        })
    </script>
</body>
</html>

Summarize:

List data is saved using an array;
The v-bind directive can set element attributes, such as src ;
Both v-show and v-if can switch the display status of elements, but v-show is recommended for frequent switching.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to implement the Vue mouse wheel scrolling switching routing effect
Vue implements scrolling the mouse wheel to switch pages
Vue uses swiper to switch pictures by sliding left and right
Vue implements button switching picture
Vue custom js picture fragment carousel switching effect implementation code
Vue realizes picture switching effect
Vue implements switching function between base64 encoded images
Detailed explanation of the use of Vue card-style click-to-switch image component
Vue+js click arrow to switch pictures
Vue implements mouse hover to switch image src

<<: Causes and solutions for MySQL master-slave synchronization delay

>>: Example of how to implement master-slave hot standby using Docker+keepalived+nginx