vue增删

使用setup语法糖

<template>
  <div>
    <p>用户名：<input type="text" v-model="obj.name" /></p>
    <p>年龄：<input type="text" v-model="obj.age" /></p>
    <p>个人描述：<input type="text" v-model="obj.dec" /></p>
    <button @click="add">添加</button>
    
  </div>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>个人描述</th>
      <th>操作</th>
    </tr>
    <tr v-for="(v, i) in arr" :key="i">
      <td>{{ v.name }}</td>
      <td>{{ v.age }}</td>
      <td>{{ v.dec }}</td>
      <td><button @click="del(i)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
/* setup 语法糖 
不需要return一个对象了  */
import { reactive, onMounted } from "vue";

onMounted(() => {
  console.log("onMounted");
});

const obj = reactive({
  name: "",
  age: "",
  dec: "",
});

const arr = reactive([]);
function del(i){
  arr.splice(i,1)
};
const add = () => {
  arr.push({
    name:obj.name,
    age:obj.age,
    dec:obj.dec,
  })
  for(var key in obj){
    obj[key] = ''
  }
};
</script>

<style scoped>
td,
th {
  padding: 10px;
}
</style>