diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..06b9f2cc53597fe43b643c572f316b133af8b975 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,28 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+function bubbleSort() {
+  let nums = document.getElementById("inputNums").value.split(",");
+  for (let i = 0; i < nums.length; i++) {
+    for (let j = 0; j < nums.length - i - 1; j++) {
+      if (parseInt(nums[j]) > parseInt(nums[j + 1])) {
+        let temp = nums[j];
+        nums[j] = nums[j + 1];
+        nums[j + 1] = temp;
+      }
+    }
+  }
+  document.getElementById("outputNums").innerHTML = nums.join(", ");
+}
+
 </script>
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+    <input type="text" id="inputNums" placeholder="请输入数字，以逗号分隔">
+<button type="button" onclick="bubbleSort()">排序</button>
+<p id="outputNums"></p>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
   </header>
 
   <main>