From 4c1d56da67e72a88af9d061e7007558b0e0ef958 Mon Sep 17 00:00:00 2001
From: p8qk6wvz2 <1514739040@qq.com>
Date: Wed, 10 Jul 2024 10:01:35 +0800
Subject: [PATCH] Update README.md

---
 README.md | 123 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 122 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 318308e..74458ae 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,123 @@
-# qweq123
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    .brand{
+      width: 600px;
+      margin:0 auto;
+      text-align: center;
+    }
+    td,th{
+      border: 1px solid;
+    }
+  </style>
+</head>
+<body>
+<div id="app">
+  <div class="brand">
+    <div class="brand">
+      <h2>商品信息表</h2>
+      <table>
+        <tr>
+          <th style="width: 30px;">ID</th><th style="width: 180px;">书名</th>
+          <th style="width: 150px;">出版社</th><th  style="width: 60px;">价格</th>
+          <th style="width: 60px;">数量</th><th style="width: 80px">金额</th>
+        </tr>
+        <tr v-for="(item,index) in books" :key="index">
+          <td>{{item.id}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.press}}</td>
+          <td>{{(item.price*0.8).toFixed(2)}}</td>
+          <td>
+            <button @click=sub(index)>-</button>
+            <input type="text" style="width: 20px" v-model="item.count">
+            <button @click=add(index)>+</button>
+          </td>
+          <td>
+            {{(item.price*item.count).toFixed(2)}}
+          </td>
+        </tr>
+        <tr><td colspan="5">合计：</td><td>{{totaAmount.toFixed(2)}}</td></tr>
+      </table>
+    </div>
+  </div>
+</div>
+
+<script>
+  Vue.createApp({
+    data(){
+      return{
+        books:[
+          {
+            id: 1,
+            name: "PHP程序设计",
+            press: "清华大学出版社",
+            price: 49,
+            count:3
+          },
+          {
+            id: 2,
+            name: "Laravel框架开发",
+            press: "清华大学出版社",
+            price: 36,
+            count:4
+          },
+          {
+            id: 3,
+            name: "微信小程序开发技术",
+            press: "人民邮电出版社",
+            price: 58,
+            count:3
+
+          },
+          {
+            id: 4,
+            name: "Vue.js开发技术",
+            press: "高等教育出版社",
+            price: 48,
+            count:5
+          }
+        ]
+
+      }
+    },
+    methods:{
+      //同类图书的金额
+      salesPrice(p){
+        //编写代码 2：
+        //toFixed(2)可以保留两们小数
+        p.toFixed(2)
+
+      },
+      add(index){
+        //编写代码 3：
+        if (this.books[index].count < 10) {
+          this.books[index].count++;
+
+        }
+
+      },
+      sub(index){
+        //编写代码4：
+        if (this.books[index].count > 0) {
+          this.books[index].count--;
+        }
+      }
+
+    },
+    computed:{
+      //所有图书的总金额
+      totaAmount(){
+        //编写代码 5：
+        return this.books.reduce((total, book) => total + (book.price * book.count), 0);
+      }
+    }
+
+  }).mount('#app')
+</script>
+</body>
+</html>
 

ID	书名	出版社	价格	数量	金额
{{item.id}}	{{item.name}}	{{item.press}}	{{(item.price*0.8).toFixed(2)}}	+ + + +	+ {{(item.price*item.count).toFixed(2)}} +
合计：					{{totaAmount.toFixed(2)}}