Heim >Web-Frontend >js-Tutorial >Beispielcode für eine Schleife mit der V-for-Anweisung

Beispielcode für eine Schleife mit der V-for-Anweisung

零下一度
零下一度Original
2017-06-29 15:51:052364Durchsuche

In diesem Artikel werden Ihnen hauptsächlich relevante Informationen zu den allgemeinen Anweisungen von Vue.js und der Schleifenverwendung von V-for-Anweisungen vorgestellt. Der Artikel stellt sie ausführlich anhand des Beispielcodes vor, der für jeden einen gewissen Referenz- und Lernwert hat . Freunde, die es brauchen. Werfen wir einen Blick unten.

Vorwort

In Vue.js erfordert die v-for-Direktive eine spezielle Syntax in Form von „item in items“, also der Quelle dataArray und item ist ein Alias ​​für die Array-Element-Iteration.

v-for kann Daten an ein Array binden, um eine Liste zu rendern:


<p id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</p>

<script>
 new Vue({
  el: &#39;#wantuizhijia&#39;,
  data: {
   sites: [
    { name: &#39;网推之家&#39; },
    { name: &#39;谷歌&#39; },
    { name: &#39;淘宝&#39; }
   ]
  }
 })
</script>

Ausgabe:

Verwenden Sie V-for in der Vorlage:


<p id="wantuizhijia">
 <ul>
  <template v-for="place in places">
   <li>{{ place.name }}</li>
   <li>--------------</li>
  </template>
 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wantuizhijia&#39;,
  data: {
   places: [
    { name: &#39;厦门&#39; },
    { name: &#39;漳州&#39; },
    { name: &#39;福州&#39; }
   ]
  }
 })
</script>

Wirkung:

v-for kann ein Objekt übergeben Attribute zum Iterieren von Daten:


<p id="wangtuizhijia">
 <ul>
  <li v-for="value in object">
   {{ value }}
  </li>
 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijia&#39;,
  data: {
   object: {
    name: &#39;脚本之家&#39;,
    url: &#39;www.jb51.net&#39;,
    slogan: &#39;美好生活,等待你的开创!&#39;
   }
  }
 })
</script>

Wirkung:

Skript Startseite

www.jb51.net

Ein wundervolles Leben wartet darauf, dass du es erschaffst!

v-for iteriert Daten durch die Eigenschaften eines Objekts. Sie können den zweiten Parameter als Schlüsselnamen angeben:


<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key) in object">
   {{ key }} : {{ value }}
  </li>

 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijia&#39;,
  data: {
   object: {
    name: &#39;脚本之家&#39;,
    url: &#39;www.jb51.net&#39;,
    slogan: &#39;美好生活,等待你的开创!&#39;
   }
  }
 })
</script>

Effekt:

Name: Script Home

URL: www.jb51.net

Slogan: Ein besseres Leben wartet darauf, dass du es erschaffst!

v-for iteriert Daten durch die Eigenschaften eines Objekts und verwendet dabei den dritten Parameter als Index :


<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key, index) in object">
   {{ index }} {{ key }}:{{ value }}
  </li>

 </ul>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijia&#39;,
  data: {
   object: {
    name: &#39;脚本之家&#39;,
    url: &#39;www.jb51.net&#39;,
    slogan: &#39;美好生活,等待你的开创!&#39;
   }
  }
 })
</script>

Effekt:

0 Name:Script House

1 URL:www.jb51 . net

2 Slogan: Ein besseres Leben wartet darauf, dass du es erschaffst!

v-for kann auch Ganzzahlen schleifen


<p id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</p>
<script>
new Vue({
el: ‘#wangtuizhijia&#39;
})
</script>
</body>

Wirkung:

1
2
3
4
5
6
7
8
9
10

Das obige ist der detaillierte Inhalt vonBeispielcode für eine Schleife mit der V-for-Anweisung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn