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/vue6.html
+++ b/vue6.html
@@ -0,0 +1,184 @@
+<!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 {
+      font-family: "Microsoft YaHei", sans-serif;
+      background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+
+    .container {
+      background: #fff;
+      border-radius: 16px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      padding: 30px 50px;
+      text-align: center;
+      width: 380px;
+      transition: 0.3s;
+    }
+
+    h2 {
+      margin-bottom: 20px;
+      color: #1565c0;
+    }
+
+    input, select, button {
+      padding: 8px;
+      margin: 8px 0;
+      width: 80%;
+      font-size: 16px;
+      border-radius: 8px;
+      border: 1px solid #ccc;
+      transition: 0.2s;
+    }
+
+    input:focus, select:focus {
+      outline: none;
+      border-color: #42a5f5;
+      box-shadow: 0 0 5px rgba(66,165,245,0.4);
+    }
+
+    button {
+      background: #42a5f5;
+      color: #fff;
+      border: none;
+      cursor: pointer;
+      width: 85%;
+    }
+
+    button:hover:not(:disabled) {
+      background: #1e88e5;
+    }
+
+    button:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    .result {
+      margin-top: 15px;
+      font-size: 18px;
+      font-weight: bold;
+      color: #2e7d32;
+    }
+
+    .error {
+      color: #d32f2f;
+      margin-top: 10px;
+      min-height: 20px;
+    }
+
+    ul {
+      text-align: left;
+      padding-left: 40px;
+    }
+
+    li {
+      list-style: disc;
+      margin: 3px 0;
+    }
+
+    .history {
+      margin-top: 20px;
+      text-align: left;
+    }
+  </style>
+</head>
+<body>
+<div id="app">
+  <div class="container">
+    <h2>任务六 简易计算器</h2>
+
+    <p>请输入第一个数：</p>
+    <input type="text" v-model.trim="num1" placeholder="支持小数与负数">
+
+    <p>
+      <select v-model="op">
+        <option value="+">＋</option>
+        <option value="-">－</option>
+        <option value="*">×</option>
+        <option value="/">÷</option>
+      </select>
+    </p>
+
+    <p>请输入第二个数：</p>
+    <input type="text" v-model.trim="num2" placeholder="支持小数与负数">
+
+    <p><button :disabled="!num1 || !num2" @click="calculate">计算</button></p>
+
+    <div class="result" v-if="result !== null">
+      得出结果：{{ result }}
+    </div>
+
+    <p class="error">{{ errorMsg }}</p>
+
+    <div class="history" v-if="history.length > 0">
+      <h3>历史记录（最近5次）</h3>
+      <ul>
+        <li v-for="(item, index) in history" :key="index">{{ item }}</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+const { createApp } = Vue;
+
+createApp({
+  data() {
+    return {
+      num1: '',
+      num2: '',
+      op: '+',
+      result: null,
+      errorMsg: '',
+      history: []
+    };
+  },
+  methods: {
+    isValidNumber(val) {
+      return /^-?\d+(\.\d+)?$/.test(val);
+    },
+    calculate() {
+      this.errorMsg = '';
+      this.result = null;
+
+      if (!this.isValidNumber(this.num1) || !this.isValidNumber(this.num2)) {
+        this.errorMsg = '请输入合法的数字（支持小数与负数）。';
+        return;
+      }
+
+      let a = parseFloat(this.num1);
+      let b = parseFloat(this.num2);
+
+      if (this.op === '/' && b === 0) {
+        this.errorMsg = '除数不能为 0。';
+        return;
+      }
+
+      let res;
+      switch (this.op) {
+        case '+': res = a + b; break;
+        case '-': res = a - b; break;
+        case '*': res = a * b; break;
+        case '/': res = a / b; break;
+      }
+
+      this.result = Math.round(res * 100) / 100; // 保留两位小数
+
+      // 添加历史记录
+      this.history.unshift(this.result);
+      if (this.history.length > 5) this.history.pop();
+    }
+  }
+}).mount('#app');
+</script>
+</body>
+</html>