vue+bootstrap实现学生信息表保存添加删除

╰半橙微兮° 2022-09-16 11:26 162阅读 0赞

**注意：代码所需vue可以通过npm i vue --save下载，然后引入即可**

**代码：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./node_modules/vue/dist/vue.js"></script>
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    </head>
    
    <body>
        <div id="app" class="container">
            <h3 class="text-center text-primary">学生信息表</h3>
            <div class="form-group">
                <label for="">姓名</label>
                <input type="text" class="form-control" placeholder="请输入姓名" aria-describedby="helpId" v-model="name">
            </div>
            <div class="form-group">
                <label for="">电话</label>
                <input type="text" class="form-control" placeholder="请输入电话" aria-describedby="helpId" v-model="tel">
            </div>
            <div class="text-center">
                <button class="btn btn-primary" @click="add()">添加</button>
                <button class="btn btn-default" @click="reset()">重置</button>
            </div>
            <div class="box text-center">
                <h3 class="text-center text-primary">信息表</h3>
                <table class="table table-bordered table-hover table-striped" width="500">
                    <tr>
                        <th class="text-center">序号</th>
                        <th class="text-center">姓名</th>
                        <th class="text-center">电话</th>
                        <th class="text-center">时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                    <tr v-for='(item,index) in arr'>
                        <td>{
       {index+1}}</td>
                        <td>{
       {item.name}}</td>
                        <td>{
       {item.tel}}</td>
                        <td>{
       {item.time}}</td>
                        <td><button class="btn btn-danger" @click='del(index)'>删除</button></td>
                    </tr>
                    <tr v-if="arr.length==0">
                        <td colspan="5">暂无数据~</td>
                    </tr>
                    <tr v-else>
                        <td colspan="5"><button class="btn btn-danger" @click="delAll()">全部删除</button></td>
                    </tr>
                </table>
            </div>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    // 如果本地存储中没有arr,会得到null,那么就给他一个[];如果有存值，那么就取出来给arr赋值
                    arr: sessionStorage.getItem("arr") ? JSON.stringify(sessionStorage.getItem("arr")) : [],
                    // 初始化数据
                    name: "",
                    tel: ""
                },
                methods: {
                    // 重置
                    reset() {
                        this.name = "",
                            this.tel = ""
                    },
                    // 添加
                    add() {
                        this.arr.push({
                            name: this.name,
                            tel: this.tel,
                            time: new Date().toLocaleTimeString()
                        });
                        // 存储到本地存储
                        sessionStorage.setItem("arr", JSON.stringify(this.arr));
                        // 重置数据
                        this.reset();
                    },
                    // 删除
                    del(index) {
                        this.arr.splice(index, 1);
                        // 存储到本地存储
                        sessionStorage.setItem("arr", JSON.stringify(this.arr));
                    },
                    // 删除全部
                    delAll() {
                        this.arr = [];
                        // 存储到本地存储
                        sessionStorage.setItem("arr", JSON.stringify(this.arr));
                    }
                }
            })
        </script>
    </body>
    
    </html>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/55e49ae850514114b0fb0ed71031c095.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/15ec610ad5b04d409bc65e383aeb251d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/383df79bedff4cbcb074afbd2840d476.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/0edfff7ceb1049c8a873c038274b5280.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/1bd7e363fcca4f138e7ef28b67089d07.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/6249ff513f20471199fbb62c82e9b88d.png