start:vue3

2025-12-16 21:51:59 -05:00 · 2025-10-30 14:35:06 +08:00
parent 2c9ff8d3ea
commit f0ed76db7c
9 changed files with 755 additions and 0 deletions
--- a/vue4.html
+++ b/vue4.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <title>学生成绩计算</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh; 
+      margin: 0;
+      background: #f3f4f6;
+      font-family: "Microsoft YaHei", sans-serif;
+    }
+
+    .card {
+      background: white;
+      padding: 30px;
+      border-radius: 12px;
+      box-shadow: 0 6px 16px rgba(0,0,0,0.1);
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 400px;
+    }
+
+    th {
+      background-color: #4f46e5;
+      color: white;
+      padding: 12px;
+      font-size: 16px;
+    }
+
+    td {
+      padding: 10px;
+      text-align: center;
+      border-bottom: 1px solid #e5e7eb;
+      font-size: 15px;
+    }
+
+    input {
+      width: 100px;
+      padding: 6px 8px;
+      border: 1px solid #cbd5e1;
+      border-radius: 6px;
+      text-align: center;
+      font-size: 14px;
+      transition: 0.2s;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: #4f46e5;
+      box-shadow: 0 0 4px rgba(79,70,229,0.4);
+    }
+
+    input[readonly] {
+      background: #f9fafb;
+      color: #374151;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <div id="app" class="card">
+    <table>
+      <tr>
+        <th>学科</th>
+        <th>分数</th>
+      </tr>
+      <tr>
+        <td>语文</td>
+        <td><input v-model="chinese" type="text"></td>
+      </tr>
+      <tr>
+        <td>数学</td>
+        <td><input v-model="math" type="text"></td>
+      </tr>
+      <tr>
+        <td>英语</td>
+        <td><input v-model="english" type="text"></td>
+      </tr>
+      <tr>
+        <td>总分</td>
+        <td><input :value="total" readonly></td>
+      </tr>
+      <tr>
+        <td>平均分</td>
+        <td><input :value="average" readonly></td>
+      </tr>
+    </table>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+
+    createApp({
+      data() {
+        return {
+          chinese: 0,
+          math: 0,
+          english: 0
+        };
+      },
+      computed: {
+        total() {
+          let c = Number(this.chinese) || 0;
+          let m = Number(this.math) || 0;
+          let e = Number(this.english) || 0;
+          return c + m + e;
+        },
+        average() {
+          return Math.floor(this.total / 3);
+        }
+      }
+    }).mount("#app");
+  </script>
+</body>
+</html>