✨ 球和案例

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 Demo1 from "@/views/demo1/index.vue";
-import Demo2 from "@/views/demo2/index.vue";
+// import Demo2 from "@/views/demo2/index.vue";
-import Demo3 from "@/views/demo3/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>

vue2-tutorials/single-file/demo2/src/views/demo4/compontens/Count.vue

@@ -1,22 +1,46 @@
 <template>
   <div>
-    <h1>当前求和为：？？？</h1>
+    <h1>当前求和为:{{ sum }}</h1>
-    <select>
+    <select v-model.number="num">
-      <option value="1">1</option>
+      <option :value="1">1</option>
-      <option value="2">2</option>
+      <option :value="2">2</option>
-      <option value="3">3</option>
+      <option :value="3">3</option>
     </select>
 
-    <button>+</button>
+    <button @click="increment">+</button>
-    <button>-</button>
+    <button @click="decrement">-</button>
-    <button>-当前求和为奇数再加</button>
+    <button @click="incrementOdd">当前求和为奇数再加</button>
-    <button>-等一等再加</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>
 

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>