双向绑定

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>