So löschen Sie einen Dom-Knoten in vue.js

Vue.js-Methode zum Löschen von Dom-Knoten: 1. v-for-Schleife von Dom-Knoten, um sicherzustellen, dass jedes Li über eine Löschschaltfläche verfügt und das Löschereignis bindet; 2. Dom-Knoten löschen, z. B. [this.datahistory.splice( this .$refs.li[index], 1)].

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

vue muss zwei Schritte durchlaufen, um den aktuellen Dom-Knoten zu löschen:

Der erste Schritt: v-for durchläuft den Dom-Knoten und stellt sicher, dass jedes Li eine Löschschaltfläche hat und das Löschereignis bindet

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

Der zweite Schritt: DOM-Knoten löschen

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

Empfohlenes Lernen:php-Schulung

Das obige ist der detaillierte Inhalt vonSo löschen Sie einen Dom-Knoten in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!