Vue.js implements image switching function

This article shares the specific code of Vue.js to implement the image switching function for your reference. The specific content is as follows

The functions are as follows

The file directory is as follows. To implement this function, you only need to modify the storage location of the picture.

The code is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <style type="text/css">
  div {
   margin: 0 auto;
   width:200px;
   height: 300px;
   border: 1px solid aqua;
  }
  img {
   margin: 0 auto;
   width: 200px;
   height: 250px;
   border: 1px solid aqua;
  }
  
 
 </style>
 <body>
  <div id="app">
   <img :src="imgSrc[index]" >
   <button type="button" @click="prephoto()">Previous photo</button>
   <button type="button" @click="nextphoto()">Next photo</button>
  </div>
  <script type="text/javascript">
   var app = new Vue({
    el:"#app",
    data:{
             imgSrc:["./img/1.jpg","./img/2.jpg"],
    index:1
    },
    methods:{
     prephoto:function(){
      this.index--;
      if(this.index===-1)
      {
       this.index=this.imgSrc.length-1;
      }
      console.log(this.index)
     },
     nextphoto:function(){
      this.index++;
      if(this.index===this.imgSrc.length){
       this.index=0;
      }
      console.log(this.index)
     }
    }
   })
  </script>
 </body>
</html>

Suitable for beginners.

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:

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

<<: Automatically install the Linux system based on cobbler

>>: Explanation of the usage scenarios of sql and various nosql databases