首页 >web前端 >Vue.js > 正文

vue.js怎么删除dom节点

原创2021-09-29 16:44:210381

vue.js删除dom节点的方法:1、v-for循环dom节点,保证每个li都有一个删除按钮,并绑定删除事件;2、删除dom节点,如【this.datahistory.splice(this.$refs.li[index], 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培训

以上就是vue.js怎么删除dom节点的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue.js dom 节点
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • 麦子学院Vue.js视频教程麦子学院Vue.js视频教程
  • Vue.js + Node.js构建音乐播放器实战视频教学Vue.js + Node.js构建音乐播放器实战视频教学
  • 视频教程分类