<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div> <fieldset> <legend>Create New</legend> <label for="">Name:</label> <input type="text" v-model="newPerson.name"> <label for="">Age:</label> <input type="text" v-model="newPerson.age"> <label for="">Age:</label> <select v-model="newPerson.sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> <button @click="createPerson">Create</button> </fieldset> <table> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> <th>Delete</th> </tr> <tr v-for="person in people"> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.sex}}</td> <td><button @click="deletePerson($index)">Delete</button></td> </tr> </table> </div> <script> var app = new Vue({ el: '#app', data: { newPerson: { name: '', age: 0, sex: 'Male' }, people: [{ name: 'tyy', age: 24, sex: 'Male' }, { name: 'syd', age: 24, sex: 'Female' }] }, methods: { createPerson: function(){ this.people.push(this.newPerson); this.newPerson = { name: '', age: 0, sex: 'Male' } }, deletePerson: function(index){ this.people.splice(index, 1); } } }) </script> </body> </html>
运行截图：
参考链接：