Listen Sie Rendering-Anweisungen für eine effiziente Entwicklung des Vue-Frontends auf

<Text>
    <Stil>
        * {
            Rand: 0px;
            Polsterung: 0px;
        }
        
        ul {
            Listenstil: keiner;
        }
    </Stil>
    <!--Daten durchlaufen-->
    <div id="app">
        <!--item: Schlüssel-->
        <!--Wert: Wert-->
        <!--index: Index-->
        <ul v-for="(Artikel, Wert, Index) in Personen">
            <li>{{index}}:{{Wert}}:{{Artikel}}</li>
        </ul>
    </div>
    <script src="js/Vue.js"></script>
    <Skript>
        neuer Vue({
            el: "#app",
            Daten: {
                Text: „Unsere Reise geht zu den Sternen und zum Meer!“,
                arr: ["Macabaca", "Ähm", "Kleiner Punkt", "Tom Blido", "Ding Ding Car"],
                Menschen:
                    ID: 1,
                    Name: "Chow Yun-fett",
                    Alter: 65
                }
            }
        })
    </Skript>
</body>

        <table class="table Tabellen-Hover Tabellen-Rand">
            <tr Klasse="info">
                <th>Nummer</th>
                <th>Name</th>
                <th>Alter</th>
                <th>Einführung</th>
            </tr>
            <tr v-for="Element in Listen">
                <td>{{item.id}}</td>
                <td>{{Artikelname}}</td>
                <td>{{item.age+"Wartezeit"}}</td>
                <td>{{item.show}}</td>
            </tr>
        </Tabelle>

    <Skript>
        neuer Vue({
            el: "#app",
            Daten: {
                "Listen": [{
                    "Ich würde": 1,
                    "Name": "Zhang San",
                    "Alter": 18,
                    "show": "Zhang Sans Einführung"
                }, {
                    "Ich würde": 2,
                    "Name": "Li Si",
                    "Alter": 19,
                    "show": "Li Si Einführung"
                }, {
                    "Ich würde": 3,
                    "Name": "Wang Wu",
                    "Alter": 20,
                    "show": "Einführung in Wang Wu"
                }, {
                    "Ich würde": 4,
                    "Name": "Zhao Liu",
                    "Alter": 21,
                    "show": "Einführung in Zhao Liu"
                }, {
                    "Ich würde": 5,
                    "Name": "Sun Ba",
                    "Alter": 22,
                    "show": "Einführung in Sun Ba"
                }]
            }
    </Skript>

        <p><input type="text" v-model="selectkey" placeholder="Bitte eingeben"></p>

            berechnet: {
                neueListe: Funktion() {
                    var _this = dies;
                    return _this.lists.filter(Funktion(Wert) {
                        gibt val.name.indexOf(_this.selectkey) zurück != -1;
                    })
                }
            }

        <p Klasse="Eingabegruppe">
            <span class="input-group-addon">Nummer:</span>
            <input type="text" v-model="id" placeholder="Bitte geben Sie die Nummer ein" class="form-control">
        </p>
        <p Klasse="Eingabegruppe">
            <span class="input-group-addon">Name:</span>
            <input type="text" v-model="name" placeholder="Bitte geben Sie Ihren Namen ein" class="form-control">
        </p>
        <p Klasse="Eingabegruppe">
            <span class="input-group-addon">Alter:</span>
            <input type="text" v-model="age" placeholder="Bitte geben Sie Ihr Alter ein" class="form-control">
        </p>
        <p Klasse="Eingabegruppe">
            <span class="input-group-addon">Informationen:</span>
            <input type="text" v-model="show" placeholder="Bitte geben Sie Informationen ein" class="form-control">
        </p>
        <p Klasse="Eingabegruppe">
            <button @click="add()" class="btn btn-primary">Informationen hinzufügen</button>
        </p>

<td>
	<button v-on:click="dels(item.id)" class="btn btn-primary">Löschen</button>
</td>

            Methoden: {
                hinzufügen: function() {
                    var Mädchen = {
                        "id": diese.id,
                        "Name": dieser.Name,
                        "Alter": dieses.Alter,
                        "anzeigen": diese.anzeigen
                    }
                    diese.listen.push(Mädchen);
                },
                dels: Funktion(o) {
                    //Lösche den Index, lösche einige for (let i = 0; i < this.lists.length; i++) {
                        wenn (diese.lists[i].id == o) {
                            diese.lists.splice(i, 1);
                        }
                    }
                }
            }

betrachten:
        zuerst: Funktion (Wert) {
               dies.voll = val + ' ' + dies.letztes
        },
        letzte: Funktion (Wert) {
               dies.voll = dies.zuerst + ' ' + val
       }
}