Vue implementiert Buchverwaltungsfall

<style type="text/css">
    .Netz {
      Rand: automatisch;
      Breite: 550px;
      Textausrichtung: zentriert;
    }

    .grid Tabelle {
      Breite: 100 %;
      Rahmen-Zusammenbruch: Zusammenbruch;
    }

    .Raster th,
    td {
      Polsterung: 10;
      Rand: 1px gestrichelt orange;
      Höhe: 35px;
    }

    .grid th {
      Hintergrundfarbe: orange;
    }

    .Raster .Buch {
      Breite: 550px;
      Polsterung unten: 10px;
      Polsterung oben: 5px;
      Hintergrundfarbe: Rasengrün;
    }

    .Raster .Gesamt {
      Höhe: 30px;
      Zeilenhöhe: 30px;
      Hintergrundfarbe: Rasengrün;
      Rahmen oben: 1px durchgehend orange;
    }
</Stil>

<div id="app">
    <div Klasse='Raster'>
      <div>
        <h1>Buchverwaltung</h1>
        <div Klasse="Buch">
          <div>
            <Bezeichnung für='id'>
              Seriennummer:
            </Bezeichnung>
            <Eingabetyp="Text" id="id" v-Modell='id' :deaktiviert='Flag' v-Fokus>
            <label für="name">
              Name:
            </Bezeichnung>
            <Eingabetyp="Text" ID='Name' v-Modell='Name'>
            <button @click='handle' :disabled='submitFlag'>Senden</button>
          </div>
        </div>
      </div>
      <div Klasse='gesamt'>
        <span>Gesamtzahl der Bücher:</span><span>{{total}}</span>
      </div>
      <Tabelle>
        <Kopf>
          <tr>
            <th>Nummer</th>
            <th>Name</th>
            <th>Zeit</th>
            <th>Betrieb</th>
          </tr>
        </thead>
        <tbody>
          <tr :key="item.id" v-for="Artikel in Büchern">
            <td>{{item.id}}</td>
            <td>{{Artikelname}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:MM:ss')}}</td>
            <td><a href="" @click.prevent='toEdit(item.id)'>Bearbeiten</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>Löschen</a>
            </td>
          </tr>

        </tbody>
      </Tabelle>
    </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
  <Skripttyp="text/javascript">
    Vue.direktive('Fokus', {
      eingefügt: Funktion (el) {
        el.fokus();
      }
    })
    Vue.filter('Format', Funktion (Wert, Argument) {
      Funktion Datumsformat (Datum, Format) {
        wenn (Typ des Datums === "Zeichenfolge") {
          var mts = date.match(/(\/Datum\((\d +)\)\/)/);
          wenn (mts && mts.Länge >= 3) {
            Datum = parseInt(mts[2]);
          }
        }
        Datum = neues Datum(Datum);
        if (!date || date.toUTCString() == "Ungültiges Datum") {
          zurückkehren "";
        }
        var Karte = {
          "M": date.getMonth() + 1, //Monat "d": date.getDate(), //Tag "h": date.getHours(), //Stunden "m": date.getMinutes(), //Minuten "s": date.getSeconds(), //Sekunden "q": Math.floor((date.getMonth() + 3) / 3), //Quartal "S": date.getMilliseconds() //Millisekunden };
        format = format.replace(/([yMdhmsqS])+/g, Funktion (alle, t) {
          var v = map[t];
          wenn (v != undefiniert) {
            wenn (alle.Länge > 1) {
              v = '0' + v;
              v = v.substr(v.Länge - 2);
            }
            zurückgeben v;
          } sonst wenn (t === 'y') {
            return (date.getFullYear() + '').substr(4 - alle.Länge);
          }
          alles zurückgeben;
        });
        Rückgabeformat;
      }
      gibt Datumsformat (Wert, Argument) zurück;
    })
    var vm = neuer Vue({
      el: '#app',
      Daten: {
        Flagge: falsch,
        submitFlag: false,
        Ausweis: '',
        Name: '',
        Bücher: []
      },
      Methoden: {
        Griff: Funktion () {
          wenn (diese.flagge) {
            // Der Bearbeitungsvorgang // besteht darin, die entsprechenden Daten im Array entsprechend der aktuellen ID this.books.some((item) => { zu aktualisieren.
              wenn (item.id == this.id) {
                Artikelname = dieser Name
                //Beenden Sie die Schleife nach Abschluss des Aktualisierungsvorgangs. return true;
              }
            })
            diese.flagge = falsch;
          } anders {
            // Ein Buch hinzufügen var book = {};
            Buch.ID = diese.ID;
            Buch.Name = dieser.Name;
            diese.daten = '';
            dies.bücher.push(Buch);
          }
          // Formular löschen this.id = '';
          dieser.name = '';
        }, toEdit: Funktion (ID) {
          //Änderung der ID deaktivieren
          dieses.flag = wahr;
          // Abfrage der zu bearbeitenden Daten basierend auf der ID var book = this.books.filter(function (item) {
            gibt item.id == id zurück;
          });
          console.log(Buch)
          //Senden Sie die erhaltene ID an das Formular this.id = book[0].id;
          dieser.name = buch[0].name;
        },
        deleteBook: Funktion (ID) {
          // Bücher löschen // Den Index des Elements aus dem Array anhand der ID suchen // var index = this.books.findIndex(function (item) {
          // Artikel-ID == ID zurückgeben;
          // });
          // Array-Elemente entsprechend dem Index löschen // this.books.splice(index, 1)
          // -----------------
          // Methode 2: Löschen per Filtermethode this.books = this.books.filter(function (item) {
            gibt item.id zurück != id;
          })
        }
      },
      berechnet: {
        gesamt: Funktion () {
          // Gesamtzahl der Bücher berechnen return this.books.length;
        }
      },
      betrachten:
        Name: Funktion (Wert) {
          // Überprüfen Sie, ob der Buchname bereits vorhanden ist. var flag = this.books.some(function (item) { return item.name == val; })
          wenn (Flagge) {
            // Buchname existiert this.submitFlag = true
          } anders {
            // Der Buchname existiert nicht this.submitFlag = false
          }
        }

      },
      montiert: Funktion () {
        // Wenn die Lifecycle-Hook-Funktion ausgelöst wird. Die Vorlage ist einsatzbereit // Wird im Allgemeinen verwendet, um Hintergrunddaten abzurufen und diese dann in die Vorlage einzufügen var data = [{
          ID: 1,
          Name: "Die Geschichte der Drei Reiche",
          Datum: 252597867777

        }, {
          ID: 2,
          Name: 'Wasserrand',
          Datum: 564634563453
        }, {
          ID: 3,
          Name: 'Traum der Roten Kammer',
          Datum: 345435345343
        }, {
          ID: 4,
          Name: 'Reise nach Westen',
          Datum: 345345346533
        }]
        this.books = Daten
      }
    });
</Skript>