vue.js에서 dom 노드를 삭제하는 방법

dom 노드를 삭제하는 Vue.js 방법: 1. v-for는 dom 노드를 루프하여 각 li에 삭제 버튼이 있는지 확인하고 삭제 이벤트를 바인딩합니다. 2. [this.datahistory.splice( this .$refs.li[색인], 1)].

이 기사의 운영 환경: windows10 시스템, vue.js 2.9, thinkpad t480 컴퓨터.

vue는 현재 dom 노드를 삭제하려면 두 단계를 거쳐야 합니다.

첫 번째 단계: v-for는 dom 노드를 반복하여 각 li에 삭제 버튼이 있는지 확인하고 삭제 이벤트를 바인딩합니다.

      <ul>
        <li ref="li" v-for="(item, index) in datahistory" :key="index">
        	{{item}}
        	<button @click="deleteFn">删除</button>
        </li>
      </ul>

두 번째 단계: DOM 노드 삭제

deleteFn () {
        this.datahistory.splice(this.$refs.li[index], 1) 
        // 点击调用删除方法，在datahistory数组里删除index这个下标项，逗号后面的1就代表删除当前的1项
      }

추천 학습:php training

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