练习

Vue实现对数组的增删改查
简单做一个表格

     

            

                

                    
学号
                    
姓名
                    
年龄
                    
性别
                    
操作
                
            
            

                

                    
{{item.no}}
                    
{{item.name}}
                    
{{item.age}}
                    
{{item.sex}}
                    

                        修改
                        删除
                    
                
            
        
    

渲染数据时，在Vue实例中创建一个students数组对象,并通过v-for标签来渲染数据到页面中
在页面添加一个添加学生按钮，点击按钮出现添加学生页面

            
            
学号：
            
姓名：
            
年龄：
            
性别：
            

                添加
                修改
                取消
            
            
X
        

在Vue实例对象中，定义一个空的student对象，通过v-model的双向绑定来实时对对象的数据更新，定义一个showEdit状态来显示是否时编辑窗口页面，通过isAdd状态来确定是添加还是修改

data: {
                //定义一个学生数组
                students: [
                    {
                        no: '1001',
                        name: '张三',
                        age: 20,
                        sex: '男'
                    }
                ],
                //是否显示编辑窗口
                showEdit: false,
                //是否是添加状态
                isAdd: true,
                //学生对象
                student: {
                    no: '',
                    name: '',
                    age: 0,
                    sex: ''
                }
            },

添加学生方法

 addStudent() {
                    //将表单数据展开后，返回一个新的对象
                    let stu = this.student
                    //将学生对象添加到学生数组中
                    this.students.push(stu)
                    //调用清空表单数据的方法
                    this.clear()
                },

删除学生方法

 delStudent(index) {
                    if (confirm('确定删除吗？')) {
                        //通过数组的splice(索引号，删除个数)
                        this.students.splice(index, 1)
                    }
                }

当点击表格中的修改按钮时，会调用getOne定义方法，然后根据学号索引到这个对象,并显示到编辑窗口的修改页面

getOne(no) {
                    //打开编辑窗口
                    this.showEdit = true
                    //编辑窗口是修改状态
                    this.isAdd = false
                    //根据学号查询学生对象
                    let stu = this.students.find(s => s.no === no)
                    this.student = { ...stu }
                },

修改学生信息方法

updateStudent() {
                    //根据学号，找到原始数组中指定的学生对象
                    let stu = this.students.find(s => s.no === this.student.no)
                    //修改数组里面指定学生对象的属性
                    stu.name = this.student.name
                    stu.age = this.student.age
                    stu.sex = this.student.sex
                },

clear方法清除编辑窗口数据

 clear() {
                    this.student = {
                        no: '',
                        name: '',
                        age: 0,
                        sex: ''
                    }
                },

显示编辑窗口固定居中

close方法

close() {
//编辑窗口关闭
this.showEdit = false
//修改为添加状态
this.isAdd = true
//清除窗口数据
this.clear()
},

#edit {
            width: 300px;
            height: 230px;
            border: 1px solid #ccc;
            padding: 20px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }