vue实现学员信息列表

最新推荐文章于 2023-05-23 20:40:05 发布

今天吃点啥‍️

最新推荐文章于 2023-05-23 20:40:05 发布

阅读量1.8k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/buaichiluobo/article/details/124410056

版权

如图所示，使用vue实现以下要求的学员信息管理案例

css部分：

  <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            width: 800px;
            margin: 20px auto;
        }

        .form-group {
            margin: 15px 0;
        }

        .form-control {
            height: 40px;
            padding: 10px;
            width: 100%;
            border: 1px solid #DDD;
            border-radius: 4px;
        }

        tr {
            height: 60px;
            text-align: center;
        }


        .active {
            background-color: #EEE;
        }

        table {
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #CCC;
            /* 合并边框 */
            border-collapse: collapse;
        }



        .btn {
            border: 0;
            width: 70px;
            line-height: 35px;
            text-align: center;
            color: #555;
            background: #EEE;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 700;
            outline: 0;
            margin: 0 2px;
        }

        .btn.danger {
            background-color: #D9534F;
            color: #FFF;
        }

        .btn.success {
            background-color: #337AB7;
            color: #FFF;
        }

        .line {
            border-bottom: 1px solid #DDD;
            margin: 10px 0;
        }
    </style>

我使用的是vue的 2.6.14版本

参考网址如下：

vue官网

html部分：

<body>
    <div class="container" id="app">
        <h1>学员信息管理</h1>
        <div class="line"></div>
        <div>
            <div class="form-group">
                <input v-model="stu.name" class="form-control" type="text" placeholder="姓名">
            </div>
            <div class="form-group">
                <input v-model="stu.tel" class="form-control" type="text" placeholder="手机号">
            </div>
            <div class="form-group">
                <input v-model="stu.remark" class="form-control" type="text" placeholder="备注信息">
            </div>
            <div class="form-group">
                <button class="btn success" @click="submit">添加</button>
                <button class="btn danger" @click="reset()">重置</button>

            </div>
        </div>
        <table cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr class="active">
                    <td>学员序号</td>
                    <td width="120">姓名</td>
                    <td>手机号</td>
                    <td>备注信息</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.tel}}</td>
                    <td>{{item.remark}}</td>
                    <td>
                        <button class="btn danger" @click="del">删除</button>
                    </td>
                </tr>   
                <tr>
                    <td colspan="4" style="text-align: left;">
                        <button class="btn danger" @click="delall">全部删除</button>
                    </td>
                </tr>            
            </tbody>
        </table>
    </div>
</body>

javascript部分：

<script>
    const app=new Vue({
        el:'#app',
        methods:{
            submit(){
                if(this.stu.name.trim()===''){
                    return alert('请输入学员姓名');
                }
                if(this.stu.tel.trim()===''){
                    return alert('请输入学员联系方式');
                }
                if(this.stu.remark.trim()===''){
                    return alert('请输入学员备注');
                }
                // 手动计算id
                const id=this.list.length>0?this.list[this.list.length-1].id+1:1;
                // 手动构造学员对象
                const stu={
                    id,
                    ...this.stu
                }
                // 将学员信息追加到数组末尾
                this.list.push(stu);
                // 将学员列表数据存入本地存储localStorage中
                this.setData(this.list);
                // 表单重置、
                this.reset();
                },
                // 表单重置
                reset(){
                    this.stu={
                        name:'',
                        tel:'',
                        remark:''
                    }
                },
                // 删除学员信息
                del(index){
                    this.list.splice(index,1);
                },
                delall(){
                    this.list=[];
                },
                // 存储数据
                setData(data){
                    localStorage.setItem('studentlist',JSON.stringify(data));
                },
                getData(name){
                    return JSON.parse(localStorage.getItem(name)||'[]');
                }
        },
        data:{
            // 表单数据对象
            stu:{
                name:'',
                tel:'',
                remark:''
            },
            // 学院信息列表
            list:[
                {
                    id:1,
                    name:'张三',
                    tel:10089,
                    remark:'学霸'
                },
                {
                    id:2,
                    name:'李四',
                    tel:10082,
                    remark:'学渣'
                },
            ]
        }
    })
    app.list=app.getData('studentlist');
</script>

我是初学者，这是给自己做参考的