首页用vue写一个带表格的网页

用vue写一个带表格的网页

时间: 2023-10-23 20:11:15 浏览: 83

<!DOCTYPE html> <html> <head> <title>Vue Table Example</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.email }}</td> </tr> </tbody> </table> </div> <script> var app = new Vue({ el: '#app', data: { people: [ {name: 'John', age: 25, email: 'john@example.com'}, {name: 'Jane', age: 30, email: 'jane@example.com'}, {name: 'Bob', age: 40, email: 'bob@example.com'}, {name: 'Alice', age: 35, email: 'alice@example.com'} ] } }); </script> </body> </html>

阅读全文