From 9fe5e32b8e8fc73d77d736737f4f3bb41df643f0 Mon Sep 17 00:00:00 2001
From: zxf <934701998@qq.com>
Date: Fri, 8 May 2026 01:30:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 64 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index abfd315..b80eb10 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,61 @@
-<script setup lang="ts"></script>
-
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <p>姓名：<input v-model="name" /> {{ name }}</p>
+  <p>薪水：<input v-model="salary" /> {{ salary }}</p>
+  <button @click="addSalary">涨工资</button> <br />
+  <button @click="deductSalary">扣工资</button>
+
+  <hr />
+
+  <p>学号：{{ student.id }}</p>
+  <p>成绩：{{ student.score }}</p>
+  <button @click="becomeGod">捞一下</button>
+
+  <hr />
+  <p>姓名：{{ user.name }}</p>
+  <p>工作单位：<input v-model="user.department" />{{ user.department }}</p>
+  <button @click="investigate">调查</button>
+
 </template>
 
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+//-------------------------------------------------------------
+
+let name = ref("wkn")
+let salary = ref(4000)
+function addSalary(){
+  salary.value += 100
+}
+function deductSalary(){
+  salary.value -= 1000
+}
+
+//-------------------------------------------------------------
+
+const student = reactive({
+  id:2405050505,
+  score:59
+})
+function becomeGod(){
+  if (student.score < 60){
+    student.score = 60
+  }
+}
+
+//-------------------------------------------------------------
+
+// ref不推荐包裹对象
+const user = ref({
+  name:'wkn',
+  department:'江西省发改委'
+})
+function investigate(){
+  user.value.department = "落马"
+}
+
+
+</script>
+
+
 <style scoped></style>