How to delete dom node in vue.js

Vue.js method of deleting dom nodes: 1. v-for loops dom nodes, ensuring that each li has a delete button and binding the delete event; 2. Delete dom nodes, such as [this. datahistory.splice(this.$refs.li[index], 1)].

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

Vue needs to go through two steps to delete the current dom node:

The first step: v-for loops the dom node, ensuring that each li has a delete button and binds the delete event

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

Step 2: Delete dom node

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

Recommended learning: php training

The above is the detailed content of How to delete dom node in vue.js. For more information, please follow other related articles on the PHP Chinese website!