前端对数据的增删改查你看到过吗?今天带你来实现一下在前端就页面上实现对数据的增伤改查

第一部分功能演示

先看下页面效果

 

1.  增加一条数据

2. 

3. 

1. 删除一条数据

 

1. 修改一条数据

2. 

   

 

1. 查询指定的一条记录

2. 

3. 

第二部分 上面的功能该如何实现的呢！首先又是页面改如何展示出来。

第一步 提前写好CSS样式

  <style>
        * {
            font-weight: 500;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        table {
            border-collapse: collapse;
            margin: 0%;
        }

        th,
        td {
            border: 1px solid rgb(255, 0, 0);
            width: 100px;
            height: 40px;
            text-align: center;
        }

        fieldset {
            border-radius: 12px;
            background-color: rgb(188, 225, 240);
            color: black;
            box-shadow: 1px solid black;
        }

        th {
            background-color: rgb(255, 255, 255);
            color: rgb(255, 0, 0);
            font-weight: 900;
            text-align: center;
        }
    </style>

第二步 实现表格中V-for表头的信息打印

 

 

 

 

 

 

第三步分析表格结构写出对应的模拟数据

                       Book: [
                        {
                            id: 1,
                            name: "《JavaScript从初级到中级在到高级》",
                            date: "2022年9月",
                            price: 34,
                            autor: "张三",
                            count: 1
                        },
                        {
                            id: 2,
                            name: "《java从入门到放弃》",
                            date: "2022年10月",
                            price: 79,
                            autor: "李四",
                            count: 1
                        },
                        {
                            id: 3,
                            name: "《Mysql数据库》",
                            date: "20021年3月",
                            price: 57,
                            autor: "赵武",
                            count: 1
                        },
                        {
                            id: 4,
                            name: "《我的世界》",
                            date: "20022年4月",
                            price: 17,
                            autor: "六二",
                            count: 1
                        },
                    ],

第四步 将所有的模拟数据展示在控制台

 

  <tr v-for="(Book,index) in Book " :key="index.index+''">
                <td>{{index+1}}</td>
                <td>{{Book.name}}</td>
                <td>{{Book.date}}</td>
                <td>{{Book.price}}</td>
                <td>{{Book.autor}}</td>
                <td>
                    <button @click="reduce(Book.id)">-</button>
                    {{Book.count}}
                    <button @click="increase(Book.id)">+</button>
                </td>
                <td>
                    <button @click="remove(Book.id)">移除</button>
                </td>
                <td><input type="button" value="修改" v-on:click="shoeGoods(index)" /></td>
                <td> <button @click="addArray()">增加数据</button></td>
            </tr>

第五步 实现对表格中数据的删除一条记录功能

 

                     remove(id) {
                    this.Book.forEach(element => {
                        if (element.id == id) this.Book.splice(this.Book.indexOf(element), 1)
                    })
                },

第六步 实现对表格中数据增加一条记录的功能

 

                    addArray() {
                    alert("增加数据")
                    var bookones = { id: this.BookId, name: this.BookName, date: this.BookDate, price: this.BookPrice, autor: this.AuthorName }
                    this.Book.push(bookones)
                    this.BookId = this.BookName = this.BookDate = this.BookPrice = this.AuthorName = this.BookNum = ""
                    // console.log(this.$opion.data())
                    this.popShow = false; //窗口的显示
                },

第六步 实现对表格的数据中一条记录并且对数据进行修改

 <!-- 修改功能 -->
        <fieldset>
            <legend>修改用户的数据信息</legend>
            <div id="pop" v-show="popShow">
                修改的数据名称: <input type="text" v-model="names" />
                修改的数据日期:<input type="date" v-model="rundates" />
                修改的数据价格 <input type="text" v-model="prices" />
                修改的数据作者 <input type="text" v-model="author" />
                修改的数据数量 <input type="number" v-model="nums" />
                <button type="button" @click="getModify(index)">修改</button>
                <button type="button" @click="closeWindow">取消</button>
            </div>
        </fieldset>

 

第七步 实现对表格的数据的价格求出总和

 

第 八步 实现对表格的数据的关键记录的查询

                // 查询功能
                search(that) {
                    console.log(that);
                    return this.Book.filter(Book => {
                        if (Book.name.includes(that)) {
                            // 打印查询内容的信息
                            console.log(Book.id + "______" + Book.name + "______" + Book.date + "______" + Book.price + "______" + Book.autor + "______" + Book.count)
                            var a = Book.id;
                            var b = Book.name;
                            var c = Book.date;
                            var d = Book.price;
                            var e = Book.autor;
                            var f = Book.count;
                            var err = [a, b, c, d, e, f]
                            document.write("<h1>" + err + "</h1>")

                            return Book;
                        }
                        console.log(that)
                    })
                },

第三部分 部分代码块

<!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>
</head>

<body>

    <script src="./js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    searchStr: null,
                    popShow: false,
                    popShows: false,
                    names: null,
                    prices: null,
                    autols: null,
                    keys: "",
                    datas: null,
                    // 增加的数据
                    BookId: "",
                    BookName: "",
                    BookDate: "",
                    BookPrice: "",
                    BookNum: "",
                    AuthorName: "",
                    that: "",
                    // 创建表格的数组
                    ThBookNameArray: ["书籍编号", "书籍名称", "出版日期", "价格", "作者", "购买的数量", "移除数据", "修改数据", "增加数据"],
                    keywyrds: "",
                    sortype: "",
            },
        app.mount(".app")
    </script>
</body>

</html>

 本案例采用的知识点有  V-for  V-on   v-model 和对函数的综合使用 算是一个经典的案例吧！