第一部分功能演示
先看下页面效果
增加一条数据
删除一条数据
修改一条数据
查询指定的一条记录
第二部分 上面的功能该如何实现的呢！首先又是页面改如何展示出来。
第一步 提前写好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 和对函数的综合使用 算是一个经典的案例吧！
