From 42b1ac7548a4220edbe492913e4d59703bd25905 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Tue, 21 Mar 2023 18:28:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20_脚手架/vue3_test/src/App.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/20_脚手架/vue3_test/src/App.vue b/20_脚手架/vue3_test/src/App.vue
index 3869034..dd713dd 100644
--- a/20_脚手架/vue3_test/src/App.vue
+++ b/20_脚手架/vue3_test/src/App.vue
@@ -1,12 +1,15 @@
 <template>
   <h1>个人信息：</h1>
-  <h2>姓名：{{ person.name }}</h2>
+  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
   <h2>年龄：{{ person.age }}</h2>
+  <h2 v-show="person.sex">性别：{{ person.sex }}</h2>
   <h2>工作种类：{{ person.job.type }}</h2>
   <h2>薪水：{{ person.job.salary }}</h2>
   <h2>爱好：{{ person.hobby }}</h2>
   <h2>c的值：{{ person.job.a.b.c }}</h2>
   <button @click="changeInfo">修改信息</button>
+  <button @click="addSex">添加性别</button>
+  <button @click="deleteName">删除姓名</button>
 </template>
 
 <script>
@@ -31,17 +34,18 @@ export default {
     let person = reactive({
       name: '张三',
       age: 18,
-      job:{
+      job: {
         type: '前端工程师',
         salary: '30K',
         a: {
-          b:{
+          b: {
             c: 666
           }
         }
       },
-      hobby: ['抽烟','喝酒','烫头']
+      hobby: ['抽烟', '喝酒', '烫头']
     })
+
     function changeInfo() {
       person.name = '李四'
       person.age = 88
@@ -50,9 +54,19 @@ export default {
       person.hobby[0] = '测试'
     }
 
+    function addSex() {
+      person.sex = '男'
+    }
+
+    function deleteName() {
+      delete person.name
+    }
+
     return {
       person,
       changeInfo,
+      addSex,
+      deleteName
     }
   }
 }