Vue實現(xiàn)對數(shù)組的增刪改查
簡單做一個表格

     <table>
            <thead>
                <tr>
                    <th>學(xué)號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>性別</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in students" :key="index">
                    <td>{{item.no}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td>
                        <button @click="getOne(item.no)">修改</button>
                        <button @click="delStudent(index)">刪除</button>
                    </td>
                </tr>
            </tbody>
        </table>    

渲染數(shù)據(jù)時言津，在Vue實例中創(chuàng)建一個students數(shù)組對象,并通過v-for標(biāo)簽來渲染數(shù)據(jù)到頁面中
在頁面添加一個添加學(xué)生按鈕漓踢，點擊按鈕出現(xiàn)添加學(xué)生頁面

<div id="edit" v-show="showEdit">
            <!-- 在修改界面中，不能修改學(xué)號,只讀狀態(tài) -->
            <p>學(xué)號：<input type="text" v-model="student.no" :readonly="!isAdd"></p>
            <p>姓名：<input type="text" v-model="student.name"></p>
            <p>年齡：<input type="text" v-model="student.age"></p>
            <p>性別：<input type="text" v-model="student.sex"></p>
            <p>
                <button v-if="isAdd" @click="addStudent">添加</button>
                <button v-else @click="updateStudent">修改</button>
                <button @click="clear">取消</button>
            </p>
            <div class="close" @click="close">X</div>
        </div>

在Vue實例對象中，定義一個空的student對象，通過v-model的雙向綁定來實時對對象的數(shù)據(jù)更新姑原，定義一個showEdit狀態(tài)來顯示是否時編輯窗口頁面，通過isAdd狀態(tài)來確定是添加還是修改

data: {
                //定義一個學(xué)生數(shù)組
                students: [
                    {
                        no: '1001',
                        name: '張三',
                        age: 20,
                        sex: '男'
                    }
                ],
                //是否顯示編輯窗口
                showEdit: false,
                //是否是添加狀態(tài)
                isAdd: true,
                //學(xué)生對象
                student: {
                    no: '',
                    name: '',
                    age: 0,
                    sex: ''
                }
            },

添加學(xué)生方法

 addStudent() {
                    //將表單數(shù)據(jù)展開后呜舒，返回一個新的對象
                    let stu = this.student
                    //將學(xué)生對象添加到學(xué)生數(shù)組中
                    this.students.push(stu)
                    //調(diào)用清空表單數(shù)據(jù)的方法
                    this.clear()
                },

刪除學(xué)生方法

 delStudent(index) {
                    if (confirm('確定刪除嗎锭汛？')) {
                        //通過數(shù)組的splice(索引號，刪除個數(shù))
                        this.students.splice(index, 1)
                    }
                }

當(dāng)點擊表格中的修改按鈕時袭蝗，會調(diào)用getOne定義方法唤殴，然后根據(jù)學(xué)號索引到這個對象,并顯示到編輯窗口的修改頁面

getOne(no) {
                    //打開編輯窗口
                    this.showEdit = true
                    //編輯窗口是修改狀態(tài)
                    this.isAdd = false
                    //根據(jù)學(xué)號查詢學(xué)生對象
                    let stu = this.students.find(s => s.no === no)
                    this.student = { ...stu }
                },

修改學(xué)生信息方法

updateStudent() {
                    //根據(jù)學(xué)號，找到原始數(shù)組中指定的學(xué)生對象
                    let stu = this.students.find(s => s.no === this.student.no)
                    //修改數(shù)組里面指定學(xué)生對象的屬性
                    stu.name = this.student.name
                    stu.age = this.student.age
                    stu.sex = this.student.sex
                },

clear方法清除編輯窗口數(shù)據(jù)

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

顯示編輯窗口固定居中

close方法

close() {
//編輯窗口關(guān)閉
this.showEdit = false
//修改為添加狀態(tài)
this.isAdd = true
//清除窗口數(shù)據(jù)
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;
        }