Comment supprimer le nœud dom dans vue.js

Méthode Vue.js pour supprimer les nœuds dom : 1. v-for boucle les nœuds dom, en s'assurant que chaque li a un bouton de suppression et en liant l'événement de suppression ; 2. Supprimez les nœuds dom, tels que [this.datahistory.splice( this. .$refs.li[index], 1)].

L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480.

vue doit passer par deux étapes pour supprimer le nœud dom actuel :

La première étape : v-for boucle le nœud dom, en s'assurant que chaque li a un bouton de suppression et en liant l'événement de suppression

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

La deuxième étape : supprimer le nœud DOM

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

Apprentissage recommandé :formation php

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!