Comment supprimer une ligne dans une liste à l'aide de vue.js

Cet article partage avec vous l'exemple de fonctionnement et de partage de code de vue.js supprimant une ligne dans la liste. Les amis intéressés peuvent s'y référer. La méthode

splice(index,num,item1,item2,...,itemX) ajoute/supprime des éléments du tableau et renvoie l'élément supprimé.

Remarque : index - spécifie l'emplacement d'ajout/suppression d'éléments

num --le nombre d'éléments à supprimer

item --nouveaux éléments ajoutés au tableau

La méthode splice() supprime zéro ou plusieurs éléments à partir de l'index et remplace ces éléments supprimés par une ou plusieurs valeurs déclarées dans la liste des paramètres.

Si un élément est supprimé de arrayObject, un tableau contenant l'élément supprimé est renvoyé.

(1)code html :

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

(2) code js :

 <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) Affichage des effets :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. .Plus connexe Veuillez faire attention au contenu du site Web chinois PHP !

Recommandations associées :

Comment analyser vue pour ajouter et supprimer des éléments

À propos de la méthode de mutation de vue.js array

À propos de l'analyse des modifications des objets et des tableaux de détection de vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!