Vueはボタン切り替え画像を実装します

{
 オーバーフロー: 非表示;
 パディング: 0;
 マージン: 0;
 }

 .tab ul li {
 ボックスのサイズ: 境界線ボックス;
 パディング: 0;
 フロート: 左;
 幅: 100ピクセル;
 高さ: 45px;
 行の高さ: 45px;
 リストスタイル: なし;
 テキスト配置: 中央;
 上境界線: 1px 実線 #ccc;
 右境界線: 1px 実線 #ccc;
 カーソル: ポインタ;
 }

 .tab ul li.active {
 背景色: オレンジ;
 }

 .tab ul li:最初の子 {
 border-left: 1px 青一色;
 }

 .タブdiv{
 幅: 500ピクセル;
 高さ: 300px;
 表示: なし;
 テキスト配置: 中央;
 フォントサイズ: 30px;
 行の高さ: 300px;
 境界線: 1px 青
 上境界線: 0px;
 }

 .tab div.current {
 表示: ブロック;
}

<div id="アプリ">
 <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) リスト内">
 <img :src="item.path">
 </div>
 </div>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
 /* */
 var vm = 新しい Vue({
 el: '#app',
 データ： {
 現在のインデックス: 0,
 リスト: [{
  id: 1,
  タイトル: 「リンゴ」
  パス: 'img/apple.png'
 }, {
  id: 2,
  タイトル:「オレンジ」
  パス: 'img/orange.png'
 }, {
  id: 3,
  タイトル: 「レモン」
  パス: 'img/lemon.png'
 }]
 },
 メソッド: {
 ハンドル: 関数 () {
  (this.currentIndex < 2) の場合 {
  this.currentIndex = this.currentIndex + 1
  }
 },

 ハンドラ: 関数 () {
  (this.currentIndex > 0) の場合 {
  this.currentIndex = this.currentIndex - 1
  }

 },
 ハンドル: 関数 () {
  this.currentIndex = this.currentIndex + 1
  (this.currentIndex > 2) の場合 {
  this.currentIndex = 0
  }

 },

 }
 })
</スクリプト>