利用vue也可以實現數據的增刪改查，只是未涉及到數據庫，只是在瀏覽器頁面中進行操作。

將datas數組中的數據循環輸出：

再增加一行，用於保存新數據，編輯數據後保存：

此時，數據已經呈現出來，開始進行一系列的操作：
sava:

通過v-model將在最後一行填寫的數據傳輸到piece中，然後改變this.piece的id，存入datas數組中。

deleted：

獲得要刪除該行的id，利用循環在數組datas中找到與id對應的i，使用數組的splice(i,1)方法，將該行數據刪除。

editor：

獲得要編輯的該行數據，直接把該數據賦給piece，還是利用v-model指令，此時數據會存入最後一行輸入框中，可以進行編輯。

select：
獲得要查看的該行數據，使用this.$Modal.info({.......})可以將該行數據以模擬框的形式輸出，進行查看

需要註意的是：

在content中，是用``來將數據進行連接的。

完整代碼：

<template>
    <table>
        <thead>
            <tr>
                <td>username</td>
                <td>age</td>
                <
 
td>sex</td>
                <td>professional</td>
                <td>hobby</td>
                <td>operation</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="d in datas">
                <td>
 
{{ d.username }}</td>
                <td>{{ d.age }}</td>
                <td>{{ d.sex }}</td>
                <td>{{ d.professional }}</td>
                <td>{{ d.hobby }}</td>
                <td>
                    <button @click="editor(d)">編輯</button>
                    <button @click="deleted(d.id)">刪除</button>
                    <button @click="select(d)">查看</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="username" v-model="piece.username">
                </td>
                <td>
                    <input type="text" placeholder="age" v-model="piece.age">
                </td>
                <td>
                    <input type="text" placeholder="sex" v-model="piece.sex">
                </td>
                <td>
                    <input type="text" placeholder="professional" v-model="piece.professional">
                </td>
                <td>
                    <input type="text" placeholder="hobby" v-model="piece.hobby">
                </td>
                <td>
                    <button @click="save()">保存</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    data () {
        return {
            datas: [
                {id: 1, username: ‘張三‘, age: 20, sex: ‘男‘, professional: ‘計算機‘, hobby: ‘打籃球‘},
                {id: 2, username: ‘李四‘, age: 21, sex: ‘男‘, professional: ‘web‘, hobby: ‘羽毛球‘},
                {id: 3, username: ‘王五‘, age: 23, sex: ‘男‘, professional: ‘python‘, hobby: ‘乒乓球‘},
                {id: 4, username: ‘如花‘, age: 19, sex: ‘女‘, professional: ‘java‘, hobby: ‘學習‘},
                {id: 5, username: ‘似玉‘, age: 22, sex: ‘女‘, professional: ‘軟件‘, hobby: ‘看書‘}
            ],
            piece: {
                id: 0, username: ‘‘, age: ‘‘, sex: ‘‘, professional: ‘‘, hobby: ‘‘
            }
        }
    },
    methods: {
        editor (d) {
            this.piece = d;
        },
        deleted (id) {
            for(var i =0;i<this.datas.length;i++){
                if(this.datas[i].id == id){
                    this.datas.splice(i,1);
                    break;
                }
            }
        },
        select (d) {
            this.$Modal.info({
                title: ‘用戶信息‘,
                content: `username: ${d.username}<br>age: ${d.age}<br>sex: ${d.sex}<br>professional: ${d.professional}<br>hobby: ${d.hobby}`
            })
        },
        save () {
            if(this.piece.id == 0){
                this.piece.id = this.datas.length + 1;
                this.datas.push(this.piece);
            }
            this.piece = {id: 0, username: ‘‘, age: ‘‘, sex: ‘‘, professional: ‘‘, hobby: ‘‘};
        }
    }
}
</script>

<style>
    table tr td{
        border: 2px solid black;
        padding: 5px;
        font-size: 15px;
    }
    table{
        border-collapse: collapse;
        margin: 0 auto;
    }
    thead tr td{
        font-weight: bold;
        font-size: 18px;
    }
    button{
        font-size: 15px;
        padding: 5px;
        font-weight: 100;
    }
</style>

歡迎留言討論。

關於vue的增刪改查操作