So löschen Sie eine Zeile in einer Liste mit vue.js

Dieser Artikel zeigt Ihnen die Beispieloperation und Codefreigabe von vue.js zum Löschen einer Zeile in der Liste. Interessierte Freunde können sich darauf beziehen.

Die Methode splice(index,num,item1,item2,...,itemX) fügt Elemente zum Array hinzu bzw. entfernt sie aus dem Array und gibt das gelöschte Element zurück.

Hinweis: Index – gibt den Speicherort für das Hinzufügen/Löschen von Elementen an.

Anzahl – die Anzahl der zu löschenden Elemente.

Element – ​​neue Elemente, die dem Array hinzugefügt wurden

Die splice()-Methode entfernt null oder mehr Elemente beginnend beim Index und ersetzt diese entfernten Elemente durch einen oder mehrere in der Parameterliste deklarierte Werte.

Wenn ein Element aus arrayObject gelöscht wird, wird ein Array zurückgegeben, das das gelöschte Element enthält.

(1)HTML-Code:

 <p id="app">
   <ul>
    <li v-for="todo in todos">
     <span>{{ todo.text }}</span>
     <button @click="removeTodo($index)">X</button>
    </li>
   </ul>
  </p>

(2) JS-Code:

 <script>
    new Vue({
     el: &#39;#app&#39;,
     data: {
      todos: [
       { text: &#39;Add some todos&#39; },
       { text: &#39;Learn JavaScript&#39; },
       { text: &#39;Learn Vue.js&#39; },
       { text: &#39;Build Something Awesome&#39; }
      ]
     },
     methods: {
      removeTodo: function (index) {
       this.todos.splice(index, 1);
      }
     }
    })
  </script>

(3) Wirkungsanzeige:

Das Obige ist der gesamte Inhalt dieses Artikels, der für das weitere Lernen hilfreich sein wird Inhalt, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

So analysieren Sie Vue, um Elemente hinzuzufügen und zu löschen

Über die Mutationsmethode von vue.js Array

Über Änderungsanalyse von Vue-Erkennungsobjekten und Arrays

Das obige ist der detaillierte Inhalt vonSo löschen Sie eine Zeile in einer Liste mit vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!