临时代码

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
     }
   }
 }