林志煌的代码

111.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="calculator">
+    <h2>简易计算器</h2>
+    <form @submit.prevent="calculate">
+      <input type="number" v-model="num1" placeholder="第一个数" required>
+      <select v-model="operation">
+        <option value="add">+</option>
+        <option value="subtract">-</option>
+        <option value="multiply">*</option>
+        <option value="divide">/</option>
+        <option value="modulo">%</option> <!-- 取余运算 -->
+      </select>
+      <input type="number" v-model="num2" placeholder="第二个数" required>
+      <br><br>
+      <button type="submit">计算</button>
+    </form>
+
+    <div class="result" v-if="result !== null">
+      <h3>结果: {{ result }}</h3>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      num1: null,
+      num2: null,
+      operation: 'add',
+      result: null
+    };
+  },
+  methods: {
+    calculate() {
+      const number1 = parseFloat(this.num1);
+      const number2 = parseFloat(this.num2);
+
+      if (isNaN(number1) || isNaN(number2)) {
+        alert('Please enter valid numbers.');
+        return;
+      }
+
+      switch (this.operation) {
+        case 'add':
+          this.result = number1 + number2;
+          break;
+        case 'subtract':
+          this.result = number1 - number2;
+          break;
+        case 'multiply':
+          this.result = number1 * number2;
+          break;
+        case 'divide':
+          if (number2 === 0) {
+            alert('Cannot divide by zero!');
+            return;
+          }
+          this.result = number1 / number2;
+          break;
+        case 'modulo':
+          if (number2 === 0) {
+            alert('Cannot divide by zero for modulo!');
+            return;
+          }
+          this.result = number1 % number2;
+          break;
+        default:
+          this.result = 'Invalid Operation';
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.calculator {
+  width: 300px;
+  margin: 50px auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  text-align: center;
+  background-color: #f9f9f9;
+}
+
+.calculator input[type="number"],
+.calculator select {
+  width: 80%;
+  padding: 10px;
+  margin: 10px 0;
+  font-size: 16px;
+}
+
+.calculator button {
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.calculator button:hover {
+  background-color: #45a049;
+}
+
+.result h3 {
+  margin-top: 20px;
+}
+</style>