vue.jsを使用してリスト内の行を削除する方法

この記事では、リスト内の行を削除する vue.js の操作例とコード共有を共有します。興味のある方は参照してください。

splice(index,num,item1,item2,...,itemX) メソッドは、配列に項目を追加または配列から削除し、削除された項目を返します。

注: Index -- 項目の追加/削除の場所を指定します

num -- 削除する項目の数

item -- 配列に追加される新しい項目

splice() メソッドはインデックスからゼロを削除できますまたは複数の要素を削除し、それらの削除された要素を引数リストで宣言された 1 つ以上の値に置き換えます。

arrayObject から要素が削除された場合、削除された要素を含む配列が返されます。

(1)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)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)エフェクト表示:

以上がこの記事の全内容です、学習に役立つその他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

vueを解析して要素を追加および削除する方法

vue.js配列の突然変異メソッドについて

vue検出オブジェクトと配列の変更分析について

以上がvue.jsを使用してリスト内の行を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。