<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="text" placeholder="员工姓名" v-model="emp.name"> <input type="text" placeholder="员工工资" v-model="emp.salary"> <input type="text" placeholder="员工工作" v-model="emp.job"> <input type="button" value="添加" @click="f()"> <table border="1"> <caption>员工列表</caption> <tr> <th>编号</th> <th>姓名</th> <th>工资</th> <th>工作</th> <th>操作</th> </tr> <tr v-for="(emp,i) in arr"> <td>{{i + 1}}</td> <td>{{emp.name}}</td> <td>{{emp.salary}}</td> <td>{{emp.job}}</td> <td><input type="button" value="删除" @click="del(i)" )></td> </tr> </table> </div> <script src="js/vue.min.js"></script> <script> let v = new Vue({ el: "body>div", data: { arr: [{name: "张三", salary: 3000, job: "销售"}, {name: "张三", salary: 3000, job: "销售"}, {name: "张三", salary: 3000, job: "销售"}], emp: [{name: "", salary: "", job: ""}] }, methods: { f() { v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job}) }, del(i) { v.arr.splice(i, 1) } } }) </script> </body> </html>帮我改错
时间: 2023-12-18 12:02:15 浏览: 208
网页期末作业(纯html+css实现).docx
首先,你将Vue实例挂载的元素选择器写错了,应该是`el: "body>div"`而不是`el: "div"`;
其次,你定义的emp应该是一个对象而不是一个数组,所以应该改为`emp: {name: "", salary: "", job: ""}`。
最后,在删除员工信息时,你的模板中的删除按钮有一个多余的`)`,应该删除。
修改后的代码如下:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" placeholder="员工姓名" v-model="emp.name">
<input type="text" placeholder="员工工资" v-model="emp.salary">
<input type="text" placeholder="员工工作" v-model="emp.job">
<input type="button" value="添加" @click="f()">
<table border="1">
<caption>员工列表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>工资</th>
<th>工作</th>
<th>操作</th>
</tr>
<tr v-for="(emp,i) in arr">
<td>{{i + 1}}</td>
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>
<td>{{emp.job}}</td>
<td><input type="button" value="删除" @click="del(i)"></td>
</tr>
</table>
</div>
<script src="js/vue.min.js"></script>
<script>
let v = new Vue({
el: "body > div",
data: {
arr: [
{name: "张三", salary: 3000, job: "销售"},
{name: "李四", salary: 4000, job: "技术"},
{name: "王五", salary: 5000, job: "市场"}
],
emp: {name: "", salary: "", job: ""}
},
methods: {
f() {
v.arr.push({name: v.emp.name, salary: v.emp.salary, job: v.emp.job});
},
del(i) {
v.arr.splice(i, 1);
}
}
})
</script>
</body>
</html>
```
阅读全文