vue實現(xiàn)按鈕切換圖片

更新時間：2021年01月20日 11:14:18 作者：河軟小寶

這篇文章主要為大家詳細介紹了vue實現(xiàn)按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)按鈕切換圖片的具體代碼，供大家參考，具體內(nèi)容如下

Tab選項卡

實現(xiàn)步驟

1、實現(xiàn)靜態(tài)UI效果

用傳統(tǒng)的方式實現(xiàn)標簽結(jié)構(gòu)和樣式

2、基于數(shù)據(jù)重構(gòu)UI效果

將靜態(tài)的結(jié)構(gòu)和樣式重構(gòu)為基于Vue模板語法的形式
處理事件綁定和js控制邏輯

設(shè)置基本樣式

{
 overflow: hidden;
 padding: 0;
 margin: 0;
 }

 .tab ul li {
 box-sizing: border-box;
 padding: 0;
 float: left;
 width: 100px;
 height: 45px;
 line-height: 45px;
 list-style: none;
 text-align: center;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 cursor: pointer;
 }

 .tab ul li.active {
 background-color: orange;
 }

 .tab ul li:first-child {
 border-left: 1px solid blue;
 }

 .tab div {
 width: 500px;
 height: 300px;
 display: none;
 text-align: center;
 font-size: 30px;
 line-height: 300px;
 border: 1px solid blue;
 border-top: 0px;
 }

 .tab div.current {
 display: block;
}

實現(xiàn)靜態(tài)布局

<div id="app">
 <button v-on:click="handla">向前切換</button>
 <button v-on:click="handlc">單向循環(huán)切換</button>
 <button v-on:click="handle">向后切換</button>

 <div class="tab">
 <ul>
 <li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list">{{item.title}}
 </li>
 </ul>
 <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list">
 <img :src="item.path">
 </div>
 </div>

</div>

實現(xiàn)具體功能

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
 /* */
 var vm = new Vue({
 el: '#app',
 data: {
 currentIndex: 0,
 list: [{
  id: 1,
  title: 'apple',
  path: 'img/apple.png'
 }, {
  id: 2,
  title: 'orange',
  path: 'img/orange.png'
 }, {
  id: 3,
  title: 'lemon',
  path: 'img/lemon.png'
 }]
 },
 methods: {
 handle: function () {
  if (this.currentIndex < 2) {
  this.currentIndex = this.currentIndex + 1
  }
 },

 handla: function () {
  if (this.currentIndex > 0) {
  this.currentIndex = this.currentIndex - 1
  }

 },
 handlc: function () {
  this.currentIndex = this.currentIndex + 1
  if (this.currentIndex > 2) {
  this.currentIndex = 0
  }

 },

 }
 })
</script>

最終效果