Vue realizes picture switching effect

Vue realizes picture switching effect

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

1) v-if/v-show

Both can be used to hide and show elements. But the implementation principles are different:
v-if achieves the effect of hiding and showing elements by removing and adding elements from the DOM tree.
v-show achieves the effect of hiding and showing elements by modifying the displace value of the element.

2) v-bind

v-bind can modify the attribute value of an element.
Based on this background knowledge, let's implement an example of image switching.

Functional requirements

1) Click the button on the left to display the previous picture; if the picture is the first one, hide the button
2) Click the button on the right to display the next picture; if the picture is the last one, hide the button

Implementation Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Image switching effect</title>
        <style>
            #test{
                position: absolute;
            }
            #left{
                position: absolute;
                top: 134px;
                z-index: 99;
                width: 24px;
                height: 32px;
                background-color: black;
                color: white;
                font-size: 24px;
                opacity: 0.6;
                cursor: pointer;
            }
            #right{
                position: absolute;
                right: 0;
                top: 134px;
                z-index: 99;
                width: 24px;
                height: 32px;
                background-color: black;
                color: white;
                font-size: 24px;
                opacity: 0.6;
                cursor: pointer;
            }
            img{
                width: 500px;
                height: 300px;
                
            }
            
        </style>
    </head>
    <body>
        <div id="test" >
            <div id="left" @click = "changeleft" v-if="lefttt"> &lt; </div>
            <img v-bind:src = "'imgs/00'+num+'.jpg'"/><br>
            <div id="right" @click = "changeright" v-show="righttt"> &gt; </div>
           

        </div>
    </body>
    <!-- Development version, including helpful command line warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
         
         var dated = new Vue({
             //Mount point el: "#test",
             //data: {
                num: 1,
                lefttt:false,
                righttt:true,
             },
             methods: {
                 changeleft : function (){
                    if(this.num <= 2){
                        this.lefttt=false;
                        this.num = 1;
                    }else{
                        this.lefttt=true;
                        this.num--;
                    }
                    
                    this.righttt=true;
                 },
                 changeright : function (){
                    if(this.num >= 7){
                        this.righttt=false;
                        this.num = 8;
                    }else{
                        this.righttt=true;
                        this.num++;
                    }
                    
                    this.lefttt=true;
                    
                 }
             }
         });
    
    </script>
</html>

Effect

1) When displaying the first picture

2) When displaying the last picture

3) When displaying other pictures

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 implements switching function between base64 encoded images
  • Detailed explanation of the use of Vue card-style click-to-switch image component
  • Vue implements simple image switching effect
  • Vue+js click arrow to switch pictures
  • Vue implements mouse hover to switch image src

<<:  MySQL group by method for single word grouping sequence and multi-field grouping

>>:  Detailed explanation of the idea of ​​xshell remote login to CentOS7 without password login

Recommend

Summarize the common application problems of XHTML code

<br />For some time, I found that many peopl...

HTML tag dl dt dd usage instructions

Basic structure: Copy code The code is as follows:...

CSS3 realizes bouncing ball animation

I usually like to visit the special pages or prod...

Detailed explanation of BOM and DOM in JavaScript

Table of contents BOM (Browser Object Model) 1. W...

MySQL 5.7.19 winx64 free installation version configuration tutorial

mysql-5.7.19-winx64 installation-free version con...

WeChat Mini Program video barrage position random

This article shares the specific code for randomi...

How to use LibreOffice to convert document formats under CentOS

Project requirements require some preprocessing o...

Mysql Sql statement comments

You can add comments to MySQL SQL statements. Her...

MySQL 5.7.17 free installation version configuration method graphic tutorial (windows10)

1. Overview I searched a lot online and found tha...

Detailed explanation of the 10061 unknown error when using Navicat to connect to a remote Linux MySQL database

When using Navicat to connect to a remote Linux M...

Installing Alibaba Cloud Server with Docker and the pitfalls encountered in installing it in a virtual machine (summary of problems)

Docker installation (Alibaba Cloud Server) Docker...

Docker container source code deployment httpd use storage volume to deploy the website (recommended)

Table of contents Deploy httpd with docker contai...

CSS implements Google Material Design text input box style (recommended)

Hello everyone, today I want to share with you ho...

Detailed explanation of custom events of Vue components

Table of contents Summarize <template> <...

MySQL 5.7.17 installation and configuration method graphic tutorial under win7

I would like to share with you the graphic tutori...