From 196c5597a43d648651ace7506c0713db3655ba69 Mon Sep 17 00:00:00 2001 From: Code12121 <3056762376@qq.com> Date: Thu, 3 Nov 2022 10:04:41 +0800 Subject: [PATCH] changes --- .../简单图书管理/css/css.css | 62 +++++++++++++++++++ .../简单图书管理/index/index.html | 39 ++++++++++++ .../简单图书管理/js/index.js | 41 ++++++++++++ .../练习：计数器.html | 54 ++++++++++++++++ 4 files changed, 196 insertions(+) create mode 100644 08-综合练习/简单图书管理/css/css.css create mode 100644 08-综合练习/简单图书管理/index/index.html create mode 100644 08-综合练习/简单图书管理/js/index.js create mode 100644 10-组件化开发/08-父子组件的访问/练习：计数器.html diff --git a/08-综合练习/简单图书管理/css/css.css b/08-综合练习/简单图书管理/css/css.css new file mode 100644 index 0000000..62467c2 --- /dev/null +++ b/08-综合练习/简单图书管理/css/css.css @@ -0,0 +1,62 @@ + * { + margin: 0; + padding: 0; + } + + table { + margin: 0 auto; + border-collapse: collapse; + width: 95%; + } + + .top_tr { + font-weight: bolder; + } + + .widther { + width: 15%; + } + + .book_widther { + width: 25%; + } + + td { + text-align: center; + padding: 10px 0; + } + + tr, + td { + border: 1px solid rgb(213, 218, 218); + ; + font-size: 22px; + } + + .top { + background-color: rgba(247, 246, 247); + } + + button { + width: 60px; + height: 30px; + border-radius: 5px; + border: none; + color: #fff; + } + + .buy { + background-color: rgba(131, 131, 199, 0.616); + } + + .sale { + background-color: rgba(105, 202, 105, 0.363); + } + + .del { + background-color: rgba(245, 193, 193, 0.822); + } + + [v-cloak] { + display: none; + } \ No newline at end of file diff --git a/08-综合练习/简单图书管理/index/index.html b/08-综合练习/简单图书管理/index/index.html new file mode 100644 index 0000000..c927014 --- /dev/null +++ b/08-综合练习/简单图书管理/index/index.html @@ -0,0 +1,39 @@ + + + + + + + Document + + + +
+
+ + + + + + + + + + + + + +
书名作者数量操作
{{item.name}}{{item.author}}{{item.num}} + + + +
+
+
+

你现在没有任何东西哟

+
+
+ + + + \ No newline at end of file diff --git a/08-综合练习/简单图书管理/js/index.js b/08-综合练习/简单图书管理/js/index.js new file mode 100644 index 0000000..2eb4960 --- /dev/null +++ b/08-综合练习/简单图书管理/js/index.js @@ -0,0 +1,41 @@ +new Vue({ + el: "#app", + data: { + books: [ + { id: 871, name: "《西游记》", author: "吴承恩", num: 0 }, + { id: 652, name: "《红楼梦》", author: "曹雪芹", num: 0 }, + { id: 123, name: "《巴黎圣母院》", author: "雨果", num: 0 }, + { id: 014, name: "《悲惨世界》", author: "雨果", num: 0 }, + { id: 025, name: "《UNIX编程艺术》", author: "Eric S. Raymond", num: 0 }, + { id: 036, name: "《计算机导论》", author: "王志强", num: 0 }, + { id: 017, name: "《战争与和平》", author: "列夫·托尔斯泰", num: 0 }, + { id: 022, name: "《三国演义》", author: "罗贯中", num: 0 }, + ] + }, + methods: { + buy_item(val) { + for (let i = 0; i < this.books.length; i++) { + if (val == this.books[i].id) { + this.books[i].num += 1 + if (this.books[i].num > 10) { + alert("你已经购买了10件不能再买了") + this.books[i].num = 10 + } + } + } + }, + sale_item(val) { + for (let i = 0; i < this.books.length; i++) { + if (val == this.books[i].id) { + this.books[i].num -= 1 + if (this.books[i].num <= 0) { + this.books[i].num = 0 + } + } + } + }, + remove(val) { + this.books.splice(val, 1) + } + }, +}) \ No newline at end of file diff --git a/10-组件化开发/08-父子组件的访问/练习：计数器.html b/10-组件化开发/08-父子组件的访问/练习：计数器.html new file mode 100644 index 0000000..1bda7a9 --- /dev/null +++ b/10-组件化开发/08-父子组件的访问/练习：计数器.html @@ -0,0 +1,54 @@ + + + + + + + Document + + +
+ + + +
+ + + + + \ No newline at end of file