From bfaaeb884348ea3b13a196b37de930f535042e4a Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 19 Jun 2025 07:38:57 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E7=90=83=E5=92=8C=E6=A1=88?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue2-tutorials/single-file/demo2/src/App.vue  | 15 ++++---
 .../src/views/demo4/compontens/Count.vue      | 44 ++++++++++++++-----
 .../demo2/src/views/demo4/index.vue           | 15 ++++++-
 3 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/vue2-tutorials/single-file/demo2/src/App.vue b/vue2-tutorials/single-file/demo2/src/App.vue
index 31109f7..28fcb9e 100644
--- a/vue2-tutorials/single-file/demo2/src/App.vue
+++ b/vue2-tutorials/single-file/demo2/src/App.vue
@@ -1,20 +1,23 @@
 <template>
   <div id="app">
-    <Demo1 />
+    <!-- <Demo1 />
     <hr />
     <Demo2 />
     <hr />
-    <Demo3 />
+    <Demo3 /> -->
+    <Demo4 />
   </div>
 </template>
 
 <script>
-import Demo1 from "@/views/demo1/index.vue";
-import Demo2 from "@/views/demo2/index.vue";
-import Demo3 from "@/views/demo3/index.vue";
+// import Demo1 from "@/views/demo1/index.vue";
+// import Demo2 from "@/views/demo2/index.vue";
+// import Demo3 from "@/views/demo3/index.vue";
+import Demo4 from "@/views/demo4/index.vue";
 
 export default {
   name: "App",
-  components: { Demo1, Demo2, Demo3 },
+  // components: { Demo1, Demo2, Demo3 },
+  components: { Demo4 },
 };
 </script>
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo4/compontens/Count.vue b/vue2-tutorials/single-file/demo2/src/views/demo4/compontens/Count.vue
index 092d279..28e6ba7 100644
--- a/vue2-tutorials/single-file/demo2/src/views/demo4/compontens/Count.vue
+++ b/vue2-tutorials/single-file/demo2/src/views/demo4/compontens/Count.vue
@@ -1,22 +1,46 @@
 <template>
   <div>
-    <h1>当前求和为：？？？</h1>
-    <select>
-      <option value="1">1</option>
-      <option value="2">2</option>
-      <option value="3">3</option>
+    <h1>当前求和为:{{ sum }}</h1>
+    <select v-model.number="num">
+      <option :value="1">1</option>
+      <option :value="2">2</option>
+      <option :value="3">3</option>
     </select>
 
-    <button>+</button>
-    <button>-</button>
-    <button>-当前求和为奇数再加</button>
-    <button>-等一等再加</button>
+    <button @click="increment">+</button>
+    <button @click="decrement">-</button>
+    <button @click="incrementOdd">当前求和为奇数再加</button>
+    <button @click="incrementWait">等一等再加</button>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Count",
+  name: "CountInfo",
+  data() {
+    return {
+      num: 1,
+      sum: 0,
+    };
+  },
+  methods: {
+    increment() {
+      this.sum += this.num;
+    },
+    decrement() {
+      this.sum -= this.num;
+    },
+    incrementOdd() {
+      if (this.sum % 2) {
+        this.sum += this.num;
+      }
+    },
+    incrementWait() {
+      setTimeout(() => {
+        this.sum += this.num;
+      }, 500);
+    },
+  },
 };
 </script>
 
diff --git a/vue2-tutorials/single-file/demo2/src/views/demo4/index.vue b/vue2-tutorials/single-file/demo2/src/views/demo4/index.vue
index da7549e..6caf973 100644
--- a/vue2-tutorials/single-file/demo2/src/views/demo4/index.vue
+++ b/vue2-tutorials/single-file/demo2/src/views/demo4/index.vue
@@ -1,3 +1,14 @@
-<template></template>
+<template>
+  <Count />
+</template>
 
-<script></script>
+<script>
+import Count from "./compontens/Count.vue";
+
+export default {
+  name: "Demo-4",
+  components: {
+    Count,
+  },
+};
+</script>