vue.js를 사용하여 목록에서 행을 삭제하는 방법

이 글은 목록의 행을 삭제하는 vue.js의 예제 작업 및 코드 공유를 공유합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

splice(index,num,item1,item2,...,itemX) 메서드는 배열에 항목을 추가/제거하고 삭제된 항목을 반환합니다.

참고: 인덱스--항목 추가/삭제 위치를 지정합니다.

num-삭제할 항목 수

item-배열에 추가된 새 항목

splice() 메서드는 인덱스에서 시작하여 0을 삭제할 수 있습니다. 또는 여러 요소를 삭제하고, 제거된 요소를 인수 목록에 선언된 하나 이상의 값으로 바꿉니다.

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를 구문 분석하여 요소를 추가하고 삭제하는 방법

vue.js 배열의 돌연변이 방법에 대해

vue 감지 개체 및 배열의 ​​변경 분석에 대해

위 내용은 vue.js를 사용하여 목록에서 행을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!