Dieser Artikel führt Sie durch den Listenrendering-Befehl von Vue: v-for. Ich hoffe, er wird Ihnen hilfreich sein!
⭐⭐
Ich persönlich bin der Meinung, dass es sich tatsächlich um eine for-Schleife mit grundlegender Syntax handelt. Die Verwendung ist ähnlich, aber die Form ist anders. Wenn Sie es verstehen, können Sie es verwenden. (Lernvideo-Sharing: vue-Video-Tutorial)
v-for="item in 数组"
v-for="(item, index) in 数组"
Ein Parameter: „Wert im Objekt“;
Zwei Parameter: „(Wert, Schlüssel) im Objekt“;
<div class="item" v-for="item in products"> <h3 class="title">商品:{{item.name}}</h3> <span>价格:{{item.price}}</span> <p>秒杀:{{item.desc}}</p> </div> const app = Vue.createApp({ data() { return { //2.数组 存放的是对象 products: [ { id: 11, name: "mac", price: 1000, desc: "99" }, ], }; }, }); app.mount("#app");
Warum hier nicht div verwenden?
Wenn es in Div verpackt ist, wird es auch so sein rendered
Tatsächlich ist die Vorlage ein Vorlagenplatzhalter, der uns beim Umschließen von Elementen helfen kann. Während des Schleifenprozesses wird die Vorlage nicht auf der Seite gerendert.
div (wenn das div keine tatsächliche Bedeutung hat, können Sie eine Vorlage verwenden, um es zu ersetzen)
<!-- 2.遍历对象 --> <ul> <li v-for="(value,key,index) in info"> {{value}} - {{key}} - {{index}} </li> </ul> const app = Vue.createApp({ data() { return { info: { bame: "why", age: 18, height: 1.88 }, }; }, }); app.mount("#app");
<li v-for="item in 100">{{item}}</li>
pop() Löschen ein Element von der Rückseite des Arrays
shift() Ein Element von der Vorderseite des Arrays löschen unshift() Ein Element von der Vorderseite des Arrays einfügen
sort() Sortieren
reverse() reverse<div v-for="(value,key,index) in infos"> <span>{{value}}</span> <strong>{{key}}</strong> <i>{{index}}</i> </div>
、
Erste Schritte mit dem Web-Frontend】
Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Listenrendering-Anweisungen von Vue: v-for. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!