在vue框架怎么样实现图片点击切换的功能-群英

上一篇：如何使用嵌套路由，知识点有哪一些下一篇：基于vue如何实现单文件组件，具体过程是什么

这篇文章将为大家详细讲解有关“在vue框架怎么样实现图片点击切换的功能”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

本文实例为大家分享了Vue.js实现图片切换功能的具体代码，供大家参考，具体内容如下

实现功能如下

文件目录如下，要实现本功能只需要修改图片的存储位置即可

代码如下

<!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()">上一张</button>
   <button type="button" @click="nextphoto()">下一张</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>

适合初学者。

以上就是关于“在vue框架怎么样实现图片点击切换的功能”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。