Detaillierte Erläuterung des Vue.js-Implementierungscodes zum Einfügen wiederholter Daten in Arrays-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Detaillierte Erläuterung des Vue.js-Implementierungscodes zum Einfügen wiederholter Daten in Arrays

Dec 19, 2017 pm 05:06 PM

javascript vue.js wiederholen

In diesem Artikel wird hauptsächlich der Implementierungscode von Vue.js vorgestellt, der wiederholte Daten in ein Array einfügt. Freunde, die ihn benötigen, können darauf verweisen.

1. Standardmäßig unterstützt Vue.js das Hinzufügen wiederholter Daten zu einem Array nicht. Dies kann mit track-by="$index" erreicht werden.

2. Verwenden Sie track-by="$index" nicht zum Einfügen von Arrays.

2.1 JavaScript-Code

&lt;script type=&quot;text/javascript&quot; src=&quot;../js/vue-1.0.21.js&quot;&gt;&lt;/script&gt; 
  &lt;script type=&quot;text/javascript&quot;&gt; 
   window.onload = function() { 
    vm = new Vue({ 
     el: &#39;#app&#39;, 
     data: { 
      arrMsg: [&#39;apple&#39;, &#39;orage&#39;, &#39;pear&#39;] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push(&#39;tamota&#39;); 
      } 
     } 
    }); 
   } 
  &lt;/script&gt;

Nach dem Login kopieren

2.2 HTML-Code

&lt;p id=&quot;app&quot;&gt; 
   &lt;!--显示数据--&gt; 
   &lt;ul&gt; 
    &lt;li v-for=&quot;value in arrMsg&quot; &gt; 
     {{value}} 
    &lt;/li&gt; 
   &lt;/ul&gt; 
   &lt;button type=&quot;button&quot; @click=&quot;add&quot;&gt;增加数据&lt;/button&gt; 
  &lt;/p&gt;

Nach dem Login kopieren

2.2 Ergebnis

3. Verwenden Sie die Array-Einfügung von track-by="$index", das Array unterstützt das Einfügen wiederholter Daten

3.1 Javascript-Code

&lt;script type=&quot;text/javascript&quot; src=&quot;../js/vue-1.0.21.js&quot;&gt;&lt;/script&gt; 
  &lt;script type=&quot;text/javascript&quot;&gt; 
   window.onload = function() { 
    vm = new Vue({ 
     el: &#39;#app&#39;, 
     data: { 
      arrMsg: [&#39;apple&#39;, &#39;orage&#39;, &#39;pear&#39;] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push(&#39;tamota&#39;); 
      } 
     } 
    }); 
   } 
  &lt;/script&gt;

Nach dem Login kopieren

3.2 HTML-Code

&lt;p id=&quot;app&quot; class=&quot;container&quot;&gt; 
   &lt;!--显示数据--&gt; 
   &lt;ul&gt; 
    &lt;li v-for=&quot;value in arrMsg&quot; track-by=&quot;$index&quot; &gt; 
     {{value}} 
    &lt;/li&gt; 
   &lt;/ul&gt; 
   &lt;button type=&quot;button&quot; @click=&quot;add&quot; &gt;增加数据&lt;/button&gt; 
  &lt;/p&gt;

Nach dem Login kopieren

3.3 Ergebnisse

4. Vollständiger Code

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> 
  <style type="text/css"> 
   .container{ 
    margin-top: 20px; 
   } 
  </style> 
  &lt;script type=&quot;text/javascript&quot; src=&quot;../js/vue-1.0.21.js&quot;&gt;&lt;/script&gt; 
  &lt;script type=&quot;text/javascript&quot;&gt; 
   window.onload = function() { 
    vm = new Vue({ 
     el: &#39;#app&#39;, 
     data: { 
      arrMsg: [&#39;apple&#39;, &#39;orage&#39;, &#39;pear&#39;] 
     }, 
     methods: { 
      add: function() { 
       this.arrMsg.push(&#39;tamota&#39;); 
      } 
     } 
    }); 
   } 
  &lt;/script&gt; 
 </head> 
 <body> 
  &lt;p id=&quot;app&quot; class=&quot;container&quot;&gt; 
   &lt;!--显示数据--&gt; 
   &lt;ul&gt; 
    &lt;li v-for=&quot;value in arrMsg&quot; track-by=&quot;$index&quot; &gt; 
     {{value}} 
    &lt;/li&gt; 
   &lt;/ul&gt; 
   &lt;button type=&quot;button&quot; @click=&quot;add&quot; &gt;增加数据&lt;/button&gt; 
  &lt;/p&gt; 
 </body> 
</html>

Nach dem Login kopieren

ps: Werfen wir einen Blick auf die Vue-Array-Duplikation und den Schleifenfehler

Vue. js unterstützt standardmäßig nicht das Hinzufügen doppelter Daten zum Array. Dies kann mit track-by="$index" erreicht werden.

Verwandte Empfehlungen:

Das ausführlichste vue.js-Installations-Tutorial

Vue.js entwickelt global MessageBox-Komponenten

Detailliertes Erlernen der allgemeinen Anweisungen von Vue.js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Vue.js-Implementierungscodes zum Einfügen wiederholter Daten in Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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