学习笔记——设置动态表格（添加、删除记录）
2022-10-27
实验结果：
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <table border="1" align="center" width="300px"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr v-for="(user,index) in userList"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.gender}}</td> <td> <input type="button" value="删除" @click="deleteUser(index)"> </td> </tr> </table> <table align="center"> <tr> <td>编号：</td> <td><input type="text" v-model="user.id"></td> </tr> <tr> <td>姓名：</td> <td><input type="text" v-model="user.name"></td> </tr> <tr> <td>性别：</td> <td><input type="text" v-model="user.gender"></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="添加" @click="addUser"> </td> </tr> </table> </div> <script> new Vue({ el:"#app", data:{ user:{ id:"", name:"", gender:"", }, userList:[ {id:101,name:"张三",gender:"男"}, {id:102,name:"李四",gender:"男"}, {id:103,name:"王五",gender:"男"}, ] }, methods:{ addUser:function(){ //1.将用户输入的数据变为User对象 //2.将User对象添加 this.userList.push(this.user); //3.添加之后要把内容复空 this.user={} }, deleteUser:function(i){ this.userList.splice(i,1); } } }) </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南