tiam-bloom/vue3_table.html

## vue3_table.html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <fieldset>
        <legend>学生信息录入系统</legend>
        <form action="/">
          <label>
            姓名:
            <input
              type="text"
              placeholder="请输入姓名"
              name="name"
              v-model="user.name"
            /> </label
          ><br />
          <label>
            年龄:
            <input type="number" name="age" v-model="user.age" /> </label
          ><br />
          <label>
            性别:
            <select name="gender" v-model="user.gender">
              <option>男</option>
              <option>女</option>
            </select> </label
          ><br />
          <label>
            手机:
            <input
              type="tel"
              placeholder="请输入手机号码"
              name="phone"
              v-model="user.phone"
            /> </label
          ><br />

          <input type="button" value="创建新用户" @click="add" />
          <input type="reset">
        </form>
      </fieldset>
      <label>
        搜索:
        <input type="text" v-model="keywords" placeholder="请要输入姓名">
      </label>
      <table border="1" cellspacing="0">
        <caption>
          学生信息
        </caption>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>手机</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list_">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
            <td>{{item.phone}}</td>
            <td>
                <!-- 阻止默认事件(跳转超链接) prevent -->
              <a href="#" @click.prevent="list.splice(index,1)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      const { createApp } = Vue;
      createApp({
        data() {
          return {
            keywords: "",
            list: [
              {
                name: "刀哥",
                age: 18,
                gender: "男",
                phone: "13800138000",
              },
              {
                name: "高启强",
                age: 18,
                gender: "男",
                phone: "13800138000",
              },
              {
                name: "安欣",
                age: 18,
                gender: "男",
                phone: "13800138000",
              },
            ],
            user: {
              name: "孟玉",
              age: 18,
              gender: "女",
              phone: "123121",
            },
          };
        },
        methods: {
          add() {
            // <!-- 解构赋值, 避免相同引用 -->
            this.list.push({ ...this.user });
            this.user = { gender: "男" };
          },
        },
        computed: {
          list_() {
            return this.list.filter((item) => {
              return item?.name?.includes(this.keywords);
            });
          },
        }
      }).mount("#app");
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
	<div id="app">
	<fieldset>
	<legend>学生信息录入系统</legend>
	<form action="/">
	<label>
	姓名:
	<input
	type="text"
	placeholder="请输入姓名"
	name="name"
	v-model="user.name"
	/> </label
	><br />
	<label>
	年龄:
	<input type="number" name="age" v-model="user.age" /> </label
	><br />
	<label>
	性别:
	<select name="gender" v-model="user.gender">
	<option>男</option>
	<option>女</option>
	</select> </label
	><br />
	<label>
	手机:
	<input
	type="tel"
	placeholder="请输入手机号码"
	name="phone"
	v-model="user.phone"
	/> </label
	><br />

	<input type="button" value="创建新用户" @click="add" />
	<input type="reset">
	</form>
	</fieldset>
	<label>
	搜索:
	<input type="text" v-model="keywords" placeholder="请要输入姓名">
	</label>
	<table border="1" cellspacing="0">
	<caption>
	学生信息
	</caption>
	<thead>
	<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>性别</th>
	<th>手机</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="(item,index) in list_">
	<td>{{item.name}}</td>
	<td>{{item.age}}</td>
	<td>{{item.gender}}</td>
	<td>{{item.phone}}</td>
	<td>
	<!-- 阻止默认事件(跳转超链接) prevent -->
	<a href="#" @click.prevent="list.splice(index,1)">删除</a>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<script>
	const { createApp } = Vue;
	createApp({
	data() {
	return {
	keywords: "",
	list: [
	{
	name: "刀哥",
	age: 18,
	gender: "男",
	phone: "13800138000",
	},
	{
	name: "高启强",
	age: 18,
	gender: "男",
	phone: "13800138000",
	},
	{
	name: "安欣",
	age: 18,
	gender: "男",
	phone: "13800138000",
	},
	],
	user: {
	name: "孟玉",
	age: 18,
	gender: "女",
	phone: "123121",
	},
	};
	},
	methods: {
	add() {
	// <!-- 解构赋值, 避免相同引用 -->
	this.list.push({ ...this.user });
	this.user = { gender: "男" };
	},
	},
	computed: {
	list_() {
	return this.list.filter((item) => {
	return item?.name?.includes(this.keywords);
	});
	},
	}
	}).mount("#app");
	</script>
	</body>
	</html>