如何使用vue.js实现删除和撤销删除的功能?

如何使用VUE实现删除和撤销删除的功能?

  <div id="one">
     <div>
         <span>1</span>
         <span>这是一条信息</span>
         <span style="color: red">删除</span>

     </div>
     <div>
         <span>2</span>
         <span>这是一条信息</span>
         <span style="color: red">删除</span>

     </div>
 </div>
 <div id="two">
     <div>
         <span>2</span>
         <span>这是一条信息</span>
         <span style="color: green">撤销删除</span>

     </div>
 </div>
 

最后通过点击按钮,获取到已经删除的信息和没有被删除的信息。

阅读 6k
2 个回答

删除的时候把 将要删除的值 push 到 某个数组 delList

撤销的时候把 上次删除的值 pop 出来

function TM(arr){
    this.arr = arr; 
    this.delArr = [];     

    this.remove = (val) => {
        this.arr = this.arr.filter(e => e !== val); 
        this.delArr.push(val); 
    }

    this.back = () => {
        var val = this.delArr.pop(); 
        this.arr.push(val); 
        return val; 
    }
}

clipboard.png

生成信息的时候加上ID用ID获取对应信息

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏