Vue implements simple image switching effect

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

Recommend

In-depth understanding of uid and gid in docker containers

By default, processes in the container run with r...

Detailed explanation of the idea of ​​MySQL trigger detecting a statement in real time for backup and deletion

Problem description: The user has a requirement t...

How to install SVN server under Linux

1. Yum installation yum install subversion 2. Con...

Detailed graphic explanation of setting up routing and virtual machine networking in Linux

What is routing? Routing refers to the activity o...

MySQL turns off password strength verification

About password strength verification: [root@mysql...

Several methods of horizontal and vertical centering of div content using css3 flex

1. flex-direction: (direction of element arrangem...

MySQL 8.0.15 winx64 decompression version installation and configuration method graphic tutorial

This article shares the installation and configur...

Vue Basics Introduction: Vuex Installation and Use

Table of contents 1. What is vuex 2. Installation...

A brief talk about MySQL semi-synchronous replication

Introduction MySQL achieves high availability of ...

Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV

Since the introduction of the contentEditable attr...

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial under Windows 10

mysql 5.7.21 winx64 installation and configuratio...

How to configure common software on Linux

When you get a new Linux server, you generally ha...

JavaScript imitates Jingdong carousel effect

This article shares the specific code for JavaScr...

How to make your own native JavaScript router

Table of contents Preface Introduction JavaScript...

WeChat applet implements the Record function

This article shares the specific code for the WeC...