vue2 实现表格添加和删除

最新推荐文章于 2024-08-19 09:56:27 发布

敲代码的小吉米

最新推荐文章于 2024-08-19 09:56:27 发布

阅读量391

点赞数 1

文章标签： javascript vue.js 前端 vue

本文链接：https://blog.csdn.net/promise466/article/details/128966031

版权

表格添加与删除

效果图
在这里插入图片描述

<!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="../js/vue.js"></script>
    <style>
        #app{
            margin: 0 auto;

        }
        button{
            cursor: pointer;
        }
        .input{
            width: 300px;
            text-align: right; 
            line-height: 30px;
        }
        .input button{
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="input">
            编号：<input type="text" v-model="num"> <br>
            商品名称：<input type="text" v-model="car"><br>
            <button @click="add()">添加</button>
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{item.number}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.time}}</td>
                    <td><button @click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data() {
            return {
                num:"",
                car:"",
                list:[
                    {
                        id:1,
                        number:1,
                        title:"坦克300",
                        time:"2023/2/10 10:37:00"
                    }
                ]
            }
        },
        methods: {

            add(){
                if(this.num&&this.car){
                    let obj={
                        // 商品名称
                        title:this.car,
                        // 商品变哈哈
                        number:this.num,
                        // 创建时间
                        time:new Date().toLocaleString(),
                        // 创建的id 通过数据里的下标的id+1 创建下一个id值
                        id:this.list.length==0?1:this.list[this.list.length-1].id+1
                    }
                    // unshift在前面添加
                    // push在后面添加
                    this.list.unshift(obj)
                    // 添加完之后 将输入框的内容清空
                    this.num="",
                    this.car=""
                }
            },
            del(id){
                confirm("确定删除此项内容吗？")
                if(confirm==true){
                    // 如果点击的id与数据list里的id值相等删除
                    // return 是返回的条件
                  this.list=this.list.filter((item)=>{
                    return item.id!=id
                })   
                }
               
            }
        },
    })
</script>
</html>