1 <template> 2 <div id="app"> 3 <!--第一部分--> 4 <fieldset> 5 <legend>指令综合小练习</legend> 6 <div> 7 <span>姓名: </span> 8 <input type="text" placeholder="请输入姓名" v-model="newPerson.name"> 9 </div> 10 <div> 11 <span>年龄: </span> 12 <input type="text" placeholder="请输入年龄" v-model="newPerson.age"> 13 </div> 14 <div> 15 <span>性别: </span> 16 <select v-model="newPerson.sex"> 17 <option value="男">男</option> 18 <option value="女">女</option> 19 </select> 20 </div> 21 <div> 22 <span>手机: </span> 23 <input type="text" placeholder="请输入手机号码" v-model="newPerson.phone"> 24 </div> 25 <button @click="createNewPerson">创建新用户</button> 26 </fieldset> 27 <!--第二部分--> 28 <table> 29 <thead> 30 <tr> 31 <td>姓名</td> 32 <td>性别</td> 33 <td>年龄</td> 34 <td>手机</td> 35 <td>删除</td> 36 </tr> 37 </thead> 38 <tbody> 39 <tr v-for="(p, index) in persons"> 40 <td v-text="p.name"></td> 41 <td v-text="p.age"></td> 42 <td v-text="p.sex"></td> 43 <td v-text="p.phone"></td> 44 <td> 45 <button @click="delPerson(index)">删除</button> 46 </td> 47 </tr> 48 </tbody> 49 </table> 50 </div> 51 </template> 52 53 <script> 54 export default { 55 name: "Demo", 56 data(){ 57 return { 58 persons: [ 59 {name: '张三', age: 20, sex: '男', phone: '18919988999'}, 60 {name: '李四', age: 30, sex: '女', phone: '18912121212'}, 61 {name: '王五', age: 40, sex: '男', phone: '18912222229'}, 62 {name: '赵六', age: 10, sex: '女', phone: '18921218999'} 63 ], 64 newPerson: {name: '', age: 0, sex: '男', phone: ''} 65 } 66 }, 67 methods: { 68 // 1. 添加 69 createNewPerson(){ 70 // 1. 验证 71 let {name, age, sex, phone} = this.newPerson; 72 if(name === ''){ 73 alert('姓名不能为空!'); 74 return; 75 } 76 if(age <= 0){ 77 alert('年龄不正确!'); 78 return; 79 } 80 if(phone === ''){ 81 alert('手机号码不正确!'); 82 return; 83 } 84 85 // 2. 插入数据 86 this.persons.unshift(this.newPerson); 87 88 // 3. 清空数据 89 this.newPerson = {name: '', age: 0, sex: '男', phone: ''}; 90 91 }, 92 // 2. 删除 93 delPerson(index){ 94 this.persons.splice(index, 1); 95 } 96 } 97 } 98 </script> 99 100 <style scoped> 101 #app{margin: 50px auto;width: 600px;} 102 fieldset{border: 1px solid orangered;margin-bottom: 20px;} 103 fieldset input{width: 200px;height: 30px;margin: 10px 0;} 104 table{width: 600px;border: 2px solid orangered;text-align: center;} 105 thead{background-color: orangered;} 106 </style>