本文例項為大家分享了vue實現按鈕切換圖片的具體程式碼，供大家參考，具體內容如下

Tab選項卡

實現步驟

1、實現靜態UI效果

用傳統的方式實現標籤結構和樣式

2、基於資料重構UI效果

將靜態的結構和樣式重構為基於Vue模板語法的形式
處理事件繫結和js控制邏輯

設定基本樣式

{
 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;
}

實現靜態佈局

<div id="app">
 <button v-on:click="handla">向前切換</button>
 <button v-on:click="handlc">單向迴圈切換</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>

實現具體功能

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

最終效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。