vue删除多条数据方法

版权声明:博客就当自己记的笔记而已~非常感谢博客大神的帮助,若有无意侵权,请联系我,谢谢 https://blog.csdn.net/qq_32963841/article/details/79956620


删除功能

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理模块</title>
<script src="vue.js"></script>
<style type="text/css">
tr:hover{
  background-color: #eee
}
.selInput{
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid #ccc;
  position: relative;
}
.select:after{
  content: '√';
  position: relative;
  top: -4px;
}
</style>
</head>
<body>
<div id="app">
  <h2>学生信息管理系统</h2>
  <hr>
  <table cellspacing='0'>
    <thead>
      <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for='item in students' @click='item.select = !item.select'>
        <td :class='item.select?"select":""' class='selInput'></td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button>添加</button>
    <button>修改</button>
    <button @click='deleteHandler'>删除</button>
  </div>
</div>
<script>
  var app = new Vue({
    el:'#app',
    methods:{
      deleteHandler:function(){
        for(let i=0; i<this.students.length; i++){
          if(this.students[i].select){
            this.students.splice(i,1)
            i--
          }
        }
      }
    },
    data() {
      return {
        students:[
          {id:1,name:'aaa',age:1,gender:'男',select: false},
          {id:2,name:'bbb',age:2,gender:'男',select: false},
          {id:3,name:'ccc',age:3,gender:'男',select: false},
          {id:4,name:'ddd',age:4,gender:'男',select: false},
          {id:5,name:'eee',age:5,gender:'男',select: false},
          {id:6,name:'fff',age:6,gender:'男',select: false},
          {id:7,name:'ggg',age:7,gender:'男',select: false},
          {id:8,name:'hh',age:8,gender:'男',select: false}
        ]
      }
    }
  });
</script>
</body>
</html>
阅读更多

扫码向博主提问

小仙女de成长

非学,无以致疑;非问,无以广识
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页