首頁 >web前端 >js教程 >如何使用vue.js刪除清單中的一行

如何使用vue.js刪除清單中的一行

不言原創: 2018-06-30 16:19:333445瀏覽

這篇文章跟大家分享了vue.js刪除清單中的一行的實例操作以及程式碼分享，有興趣的朋友參考下。

splice(index,num,item1,item2,...,itemX) 方法向/從陣列中新增/刪除項目，然後傳回被刪除的項目。

附註：index--規定新增/刪除項目的位置

num--要刪除的項目數量

item--新增給陣列的新項目

splice() 方法可刪除從index 開始的零個或多個元素，並且用參數清單中宣告的一個或多個值來取代那些被刪除的元素。

如果從 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中文網！

如何使用vue.js刪除清單中的一行

相關文章