我的代码哪里错了:<!DOCTYPE html> <html> <head> <title>学生列表</title> <style> table { border-collapse: collapse; border: 2px solid black; } th, td { border: 2px solid black; padding: 5px; } <×yle> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>学生列表</h2> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody> <!-- // TODO遍历学生列表 --> <tr v-for="(student,index) in students"> <td>{{student.name}}</td> <td>{{student.gender}}</td> <td>{{student.age}}</td> <td>{{student.phone}}</td> <td> <button @click:v-for="updateStudent">修改<^tton> </td> </tr> </tbody> </table> </div> <script> new Vue({ el: "#app", data: { students: [ { name: "张三", gender: "男", age: 18, phone: "13888888888" }, { name: "李四", gender: "女", age: 20, phone: "13999999999" }, { name: "王五", gender: "男", age: 22, phone: "13666666666" }, ], }, methods: { updateStudent(student) { Vue.set(student, "age", student.age + 1); // TODO使用 Vue.set 方法更新学生信息 }, }, }); </script> </body> <html>
时间: 2023-05-31 20:05:06 浏览: 121
HTML <!DOCTYPE> 标签
在代码中,<style> 和 <script> 标签的结束符号没有写全,应该是 </style> 和 </script>。另外,修改按钮的 @click 绑定的方法应该是 updateStudent() 而不是 v-for="updateStudent"。修改后的代码如下:
<!DOCTYPE html>
<html>
<head>
<title>学生列表</title>
<style>
table {
border-collapse: collapse;
border: 2px solid black;
}
th,
td {
border: 2px solid black;
padding: 5px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>学生列表</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- // TODO遍历学生列表 -->
<tr v-for="(student,index) in students">
<td>{{student.name}}</td>
<td>{{student.gender}}</td>
<td>{{student.age}}</td>
<td>{{student.phone}}</td>
<td>
<button @click="updateStudent">修改</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
students: [
{ name: "张三", gender: "男", age: 18, phone: "123456789" },
{ name: "李四", gender: "女", age: 20, phone: "987654321" },
{ name: "王五", gender: "男", age: 22, phone: "135792468" },
],
},
methods: {
updateStudent() {
// TODO 修改学生信息
},
},
});
</script>
</body>
</html>
阅读全文