Vue.js實(shí)現(xiàn)圖片切換功能

更新時間：2021年06月25日 10:05:36 作者：一個愛前端開發(fā)的小朋友

這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue.js實(shí)現(xiàn)圖片切換功能的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)功能如下

文件目錄如下，要實(shí)現(xiàn)本功能只需要修改圖片的存儲位置即可

代碼如下

<!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>

適合初學(xué)者。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue和H5 draggable實(shí)現(xiàn)拖拽并替換效果
這篇文章主要為大家詳細(xì)介紹了vue和H5 draggable實(shí)現(xiàn)拖拽并替換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
vue中v-if和v-for一起使用的弊端及解決辦法(同時使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時存在于一個元素上的時候，v-if 會首先被執(zhí)行，這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下
2023-07-07
vue3中Teleport和Suspense的具體使用
本文主要介紹了vue3中Teleport和Suspense的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽
這篇文章主要介紹了vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue如何根據(jù)不同的環(huán)境使用不同的接口地址
這篇文章主要介紹了vue如何根據(jù)不同的環(huán)境使用不同的接口地址問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue2從template到render模板編譯入口詳解
這篇文章主要為大家介紹了vue2從template到render模板編譯入口詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue3實(shí)現(xiàn)跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)跑馬燈效果，可以更換顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue?Echarts實(shí)現(xiàn)儀表盤案例
這篇文章主要為大家詳細(xì)介紹了vue?Echarts實(shí)現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue3?setup中父組件通過Ref調(diào)用子組件的方法(實(shí)例代碼)
這篇文章主要介紹了vue3?setup中父組件通過Ref調(diào)用子組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
Vuex unknown action type報錯問題及解決
這篇文章主要介紹了Vuex unknown action type報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02