vue表格记录增删改查不成熟记录

2022-03-02 23:01:56 阅读：182 来源： 互联网

标签：vue name 记录改查 sex 1px newRec 0px id

本篇是笔者自己练习的案例，其中可能存在很多新手错误

这是一个简单的表格形式的记录添加和删除实现。
在这里插入图片描述

<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script><!-- CDN形式引入Vue -->
    <style>
        a{
            font-size: 12px;
            color:rgb(0, 132, 255);
        }
        a:hover{
            font-size: 12px;
            text-decoration: underline;
        }
        .mTable{
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            width:100%;
            margin: 5px 0px;
        }
        .mTable tr{
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;margin: 0px;
            background-color: aliceblue;
        }
        .mTable th{
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;margin: 0px;
            background-color: rgb(79, 173, 255);
        }
        .mTable td{
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;margin: 0px;
            background-color: aliceblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="姓名" v-model="newRec.name">
        <select v-model="newRec.sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="number" placeholder="年龄" v-model="newRec.age">
        <button @click="add">新增</button>
        <table id="table" class="mTable" cellpading="0" cellspacing = 0 border="0">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="rec in recs" :key="rec.id">
                <td>{{rec.name}}</td>
                <td>{{rec.sex}}</td>
                <td>{{rec.age}}</td>
                <td><a @click="remove($event,rec.id)">删除</a></td>
            </tr>
        </table>
    </div>

    
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                recs:[
                    {id:"001",name:"张三",sex:"男",age:18},
                    {id:"002",name:"李四",sex:"女",age:28},
                    {id:"003",name:"王五",sex:"男",age:38},
                ],
                newRec:{
                    id:"",
                    name:"",
                    sex:"男",
                    age:null
                }
            },
            methods: {
                add(){
                    //动态创建id
                    this.newRec.id = "00" + this.recs.length + 1
                    //创建新纪录 newRec的副本
                    const nRec = {}
                    for (let key in this.newRec) {
                        nRec[key] = this.newRec[key]
                    }
                    //添加新纪录
                    this.recs.push(nRec)
                    //清空
                    this.newRec.id = ""
                    this.newRec.name = ""
                    this.newRec.sex = "男"
                    this.newRec.age = null
                },
                remove(e,key){
                    e.preventDefault();//阻止超链接的默认点击行为
                    let index;
                    for(let i=0;i<this.recs.length;i++){
                        if(this.recs[i].id == key){
                            index = i
                        }
                    }
                    this.recs.splice(index,1)
                }
            },
        })
    </script>
</body>
</html>

标签：vue,name,记录,改查,sex,1px,newRec,0px,id
来源： https://blog.csdn.net/graypigen1990/article/details/123241077

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue表格记录增删改查不成熟记录