Vue implementiert das Bild mit Schaltflächenwechsel

{
 Überlauf: versteckt;
 Polsterung: 0;
 Rand: 0;
 }

 .tab ul li {
 Box-Größe: Rahmenbox;
 Polsterung: 0;
 schweben: links;
 Breite: 100px;
 Höhe: 45px;
 Zeilenhöhe: 45px;
 Listenstil: keiner;
 Textausrichtung: zentriert;
 Rahmen oben: 1px durchgezogen #ccc;
 Rahmen rechts: 1px durchgezogen #ccc;
 Cursor: Zeiger;
 }

 .tab ul li.active {
 Hintergrundfarbe: orange;
 }

 .tab ul li:erstes-Kind {
 Rahmen links: 1px durchgehend blau;
 }

 .tab div {
 Breite: 500px;
 Höhe: 300px;
 Anzeige: keine;
 Textausrichtung: zentriert;
 Schriftgröße: 30px;
 Zeilenhöhe: 300px;
 Rand: 1px durchgehend blau;
 Rahmen oben: 0px;
 }

 .tab div.aktuell {
 Anzeige: Block;
}

<div id="app">
 <button v-on:click="handla">Weiterschalten</button>
 <button v-on:click="handlc">Einweg-Zyklusschalter</button>
 <button v-on:click="handle">Zurückschalten</button>

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

</div>

<script type="text/javascript" src="../js/vue.js"></script>
 <Skripttyp="text/javascript">
 /* */
 var vm = neuer Vue({
 el: '#app',
 Daten: {
 aktuellerIndex: 0,
 Liste: [{
  ID: 1,
  Titel: 'Apfel',
  Pfad: „img/apple.png“
 }, {
  ID: 2,
  Titel: 'orange',
  Pfad: „img/orange.png“
 }, {
  ID: 3,
  Titel: 'Zitrone',
  Pfad: „img/lemon.png“
 }]
 },
 Methoden: {
 Griff: Funktion () {
  wenn (dieser.aktuellerIndex < 2) {
  dieser.aktuellerIndex = dieser.aktuellerIndex + 1
  }
 },

 handle: Funktion () {
  wenn (dieser.aktuellerIndex > 0) {
  dieser.aktuellerIndex = dieser.aktuellerIndex - 1
  }

 },
 handlc: Funktion () {
  dieser.aktuellerIndex = dieser.aktuellerIndex + 1
  wenn (dieser.aktuellerIndex > 2) {
  dieser.aktuellerIndex = 0
  }

 },

 }
 })
</Skript>