<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <fieldset> <legend>信息录入</legend> <div> <label> name: <input type="text" placeholder="name" v-model.trim="newPerson.name"> </label> </div> <div> <label> age: <input type="text" placeholder="age" v-model.trim="newPerson.age"> </label> </div> <div> <label> phone: <input type="text" placeholder="phone" v-model.trim="newPerson.phone"> </label> </div> <div> <label> sex: <select v-model="newPerson.sex"> <option value="男">男</option> <option value="女">女</option> </select> </label> </div> <button @click="addPerson">add</button> </fieldset> <table border="1"> <thead> <tr> <th>id</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>手机</th> <th>删除</th> </tr> </thead> <tbody> <tr v-for="(person,index) in persons" :key="person.id"> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.sex}}</td> <td>{{person.age}}</td> <td>{{person.phone}}</td> <td><button @click="delPerson(index)">删除</button></td> </tr> </tbody> </table> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', persons:[ {id:1,name:'张三',age:20,sex:'男',phone:'13333333333',friends:['李四','王五']}, {id:2,name:'李四',age:24,sex:'女',phone:'13333333334',friends:['张三','王五']}, {id:3,name:'王五',age:28,sex:'男',phone:'13333333335',friends:['李四','张三']} ], newPerson:{name:'',age:'',sex:'男',phone:'',friends:[]} } }, methods:{ delPerson(index){ this.persons.splice(index,1); }, addPerson(){ const {name,age,sex,phone} = this.newPerson; if(!name || !age || !sex || !phone){ alert("数据不完整"); return; } this.persons.push(this.newPerson; this.newPerson = {name:'',age:'',sex:'男',phone:'',friends:[]}; } } }).mount('#app'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <fieldset> <legend>信息录入</legend> <div> <label> name: <input type="text" placeholder="name" v-model.trim="newPerson.name"> </label> </div> <div> <label> age: <input type="text" placeholder="age" v-model.trim="newPerson.age"> </label> </div> <div> <label> phone: <input type="text" placeholder="phone" v-model.trim="newPerson.phone"> </label> </div> <div> <label> sex: <select v-model="newPerson.sex"> <option value="男">男</option> <option value="女">女</option> </select> </label> </div> <button @click="addPerson">add</button> </fieldset> <table border="1"> <thead> <tr> <th>id</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>手机</th> <th>删除</th> </tr> </thead> <tbody> <tr v-for="(person,index) in persons" :key="person.id"> <td>{{person.id}}</td> <td>{{person.name}}</td> <td>{{person.sex}}</td> <td>{{person.age}}</td> <td>{{person.phone}}</td> <td><button @click="delPerson(index)">删除</button></td> </tr> </tbody> </table> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', persons:[ {id:1,name:'张三',age:20,sex:'男',phone:'13333333333',friends:['李四','王五']}, {id:2,name:'李四',age:24,sex:'女',phone:'13333333334',friends:['张三','王五']}, {id:3,name:'王五',age:28,sex:'男',phone:'13333333335',friends:['李四','张三']} ], newPerson:{name:'',age:'',sex:'男',phone:'',friends:[]} } }, methods:{ delPerson(index){ this.persons.splice(index,1); }, addPerson(){ const {name,age,sex,phone} = this.newPerson; if(!name || !age || !sex || !phone){ alert("数据不完整"); return; } this.persons.push(this.newPerson; this.newPerson = {name:'',age:'',sex:'男',phone:'',friends:[]}; } } }).mount('#app'); </script> </body> </html>