<!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>  <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>

学生列表

姓名	性别	年龄	电话	操作
{{student.name}}	{{student.gender}}	{{student.age}}	{{student.phone}}

- CSDN文库", "datePublished": "2023-05-31", "keywords": " 学生列表