style:test

2025-12-17 06:02:00 -05:00 · 2025-12-01 10:11:46 +08:00
parent 4d887e2aab
commit 2f4166e97b
8 changed files with 0 additions and 0 deletions
--- a/test/vue5.html
+++ b/test/vue5.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>Vue3 小型购物车</title>
+  <script src="https://unpkg.com/vue@3"></script>
+  <style>
+    table thead tr {
+      background-color: #ffebcd;
+    }
+
+    table {
+      margin: 0 auto;
+      border: 1px solid #989898;
+      border-collapse: collapse;
+    }
+
+    th, td {
+      border: 1px solid #989898;
+      text-align: center;
+      padding: 5px 10px;
+    }
+
+    button {
+      margin: 0 2px;
+      padding: 2px 6px;
+      cursor: pointer;
+    }
+
+    h2 {
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h2>购物车表格</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>序号</th>
+          <th>书籍名称</th>
+          <th>出版日期</th>
+          <th>价格</th>
+          <th>购买数量</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(book, index) in books" :key="book.id">
+          <td>{{ index + 1 }}</td>
+          <td>{{ book.name }}</td>
+          <td>{{ book.date }}</td>
+          <td>￥{{ book.price.toFixed(2) }}</td>
+          <td>
+            <button @click="increase(book)">+</button>
+            {{ book.count }}
+            <button @click="decrease(book)">-</button>
+          </td>
+          <td>
+            <button @click="remove(index)">移除</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3 style="text-align:center;">总价：￥{{ totalPrice.toFixed(2) }}</h3>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+
+    createApp({
+      data() {
+        return {
+          books: [
+            { id: 1, name: '《JavaScript程序设计》', date: '2022-9', price: 85.0, count: 1 },
+            { id: 2, name: '《C语言基础》', date: '2021-2', price: 59.0, count: 1 },
+            { id: 3, name: '《Java高级语言编程》', date: '2022-10', price: 39.0, count: 1 },
+            { id: 4, name: '《数据库原理》', date: '2023-3', price: 128.0, count: 1 },
+            { id: 5, name: '《计算机网络》', date: '2022-8', price: 88.0, count: 1 }
+          ]
+        };
+      },
+      computed: {
+        totalPrice() {
+          return this.books.reduce((sum, book) => sum + book.price * book.count, 0);
+        }
+      },
+      methods: {
+        increase(book) {
+          book.count++;
+        },
+        decrease(book) {
+          if (book.count > 1) book.count--;
+        },
+        remove(index) {
+          this.books.splice(index, 1);
+        }
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>
+