Bagaimana untuk memadam nod dom dalam vue.js

Kaedah Vue.js untuk memadamkan nod dom: 1. v-untuk nod dom gelung, memastikan setiap li mempunyai butang padam dan mengikat acara padam, seperti [ini .splice(this.$refs.li[index], 1)].

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480.

Vue perlu melalui dua langkah untuk memadam nod dom semasa:

Langkah pertama: v-for menggelung nod dom, memastikan setiap li mempunyai butang padam dan mengikat padam acara

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

Langkah 2: Padamkan nod dom

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

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Bagaimana untuk memadam nod dom dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!