4.28姓名: <input type="text" v-model="obj.name"> 年

<template>
<div>
 姓名: <input type="text" v-model="obj.name">
  年龄: <input type="text" v-model="obj.age">
  <button @click="add">添加</button>
</div>

  <table>
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
    </tr>
    <!-- 循环数组obj -->
    <tr v-for="(v,i) in arr" :key="i">
      <td>{{v.name}}</td>
      <td>{{v.age}}</td>
      <td><button @click="dele(index)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
import {reactive,onMounted} from "vue";
onMounted(() => {
  console.log("onMounted");
});

   const arr =reactive ([
      /* 要用数组 */
      {name:"zhangsan",
     age:30},
     {name:"lisi",
     age:40}
    ]);
    const obj = reactive({
      name:"",
      age:""
    });
    /* 这里是点击添加 */
   const add = ()=>{
     arr.push(JSON.parse(JSON.stringify(obj)))
    obj.name="",
    obj.age=""
   };
  const dele = (index)=>{
    arr.splice(index,1)
  };
</script>