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

注意：代码所需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="v

星屿H

2625人浏览 · 2021-10-19 13:17:07

星屿H · 2021-10-19 13:17:07 发布

注意：代码所需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>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <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>

效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^