Heim > Web-Frontend > js-Tutorial > Hauptteil

Allgemeine Anweisungen für Vue.js – Tutorial zum Schleifen der V-for-Anweisung

陈政宽~
Freigeben: 2017-06-28 15:36:29
Original
1726 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zu den allgemeinen Anweisungen von Vue.js und der Schleifenverwendung von V-for-Anweisungen vor. Der Artikel stellt sie detailliert anhand des Beispielcodes vor, der für jeden einen gewissen Referenz- und Lernwert hat . Freunde, die es brauchen. Schauen wir uns unten um.

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>
Nach dem Login kopieren


Ausgabe:

V-for in der Vorlage verwenden:


<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>
Nach dem Login kopieren


Wirkung:

v-for kann Daten über die -Eigenschaft eines Objekts iterieren:


<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;http://www.jb51.net&#39;,
    slogan: &#39;美好生活,等待你的开创!&#39;
   }
  }
 })
</script>
Nach dem Login kopieren


Effekt:

Script Home

http://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;http://www.jb51.net&#39;,
    slogan: &#39;美好生活,等待你的开创!&#39;
   }
  }
 })
</script>
Nach dem Login kopieren


Effekt:

Name: Script House

URL: http://www.jb51.net

Slogan: Ein besseres Leben wartet darauf, dass Sie es schaffen!

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;http://www.jb51.net&#39;,
    slogan: &#39;美好生活,等待你的开创!&#39;
   }
  }
 })
</script>
Nach dem Login kopieren


Effekt:

0 Name: Script House

1 URL: http://www.jb51.net

2 Slogan: Ein besseres Leben wartet darauf, dass Sie es schaffen!

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>
Nach dem Login kopieren


Wirkung:


1
2
3
4
5
6
7
8
9
10
Nach dem Login kopieren


Zusammenfassung

Das obige ist der detaillierte Inhalt vonAllgemeine Anweisungen für Vue.js – Tutorial zum Schleifen der V-for-Anweisung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage