UPDATE

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<script>
+export default {
+  data() {
+    return {
+      txtDate: '',
+      result: ''
+    }
+  },
+  methods: {
+    getTime() {
+      if (this.txtDate.length > 0) {
+        this.result = ''
+        const dateList = this.txtDate.split(/\n/)
+        for (let dateStr of x) {
+            const curArr = dateStr.split('-')
+            const start = new Date(`2023-03-01 ${curArr[0]}`).getTime()
+            const end = new Date(`2023-03-01 ${curArr[1]}`).getTime()
+
+            this.result += dateStr, parseFloat((end-start)/1000/60) + '<br>'
+        }
+      }
+    }
+  }
+}
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+      <h1>时间计算器</h1>
     </div>
   </header>
 
   <main>
-    <TheWelcome />
+    <textarea cols="30" rows="10" v-model="txtDate"></textarea>
+    <div>
+      <button @click="getTime">计算</button>
+    </div>
+    <br>
+    <p>输入结果：</p>
+    <div class="result" v-html="result"></div>
   </main>
 </template>