大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
1 <script src="lib/vue.js"></script> 2 <script src="lib/vue-resource.js"></script> 3 <script> 4 new Vue({ 5 el: '#app', 6 mounted() { 7 this.getStudentList(); 8 }, 9 data: { 10 students: [ 11 { name: '张三', sex: '女', age: 19, phone: '18921212121' }, 12 { name: '李四', sex: '男', age: 29, phone: '18921221121' }, 13 { name: '王五', sex: '女', age: 39, phone: '18921788721' }, 14 { name: '赵六', sex: '男', age: 49, phone: '18921556121' } 15 ], 16 newStudent: { name: '', sex: '男', age: 0, phone: '' } 17 }, 18 methods: { 19 createNewStu() { 20 // 4. 插入新纪录 21 this.students.unshift(this.newStudent); 22 // 5. 清空数据 23 this.newStudent = { name: '', sex: '男', age: 0, phone: '' } 24 }, 25 // 删除记录 26 delStudent(index) { 27 this.students.splice(index, 1); 28 } 29 } 30 });
1 <div id="app"> 2 <fieldset> 3 <legend>学生录入系统</legend> 4 <div> 5 <span>姓名:</span> 6 <input type="text" placeholder="请输入姓名" v-model="newStudent.name"> 7 </div> 8 <div> 9 <span>年龄:</span> 10 <input type="text" placeholder="请输入年龄" v-model="newStudent.age"> 11 </div> 12 <div> 13 <span>性别:</span> 14 <select v-model="newStudent.sex"> 15 <option value="男">男</option> 16 <option value="女">女</option> 17 </select> 18 </div> 19 <div> 20 <span>手机:</span> 21 <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone"> 22 </div> 23 <button @click="createNewStu()">创建新用户</button> 24 </fieldset> 25 <table> 26 <thead> 27 <tr> 28 <td>姓名</td> 29 <td>性别</td> 30 <td>年龄</td> 31 <td>手机</td> 32 <td>删除</td> 33 </tr> 34 </thead> 35 <tbody> 36 <tr v-for="(stu, index) in students" :key="index"> 37 <td>{{stu.name}}</td> 38 <td>{{stu.sex}}</td> 39 <td>{{stu.age}}</td> 40 <td>{{stu.phone}}</td> 41 <td> 42 <button @click="delStudent(index)">删除</button> 43 </td> 44 </tr> 45 </tbody> 46 </table> 47 </div>
1 <script src="lib/vue.js"></script> 2 <script src="lib/vue-resource.js"></script> 3 <script> 4 new Vue({ 5 el: '#app', 6 mounted(){ 7 this.getStudentList(); 8 }, 9 data: { 10 students: [], 11 newStudent: {name: '', sex: '男', age: 0, phone: ''} 12 }, 13 methods: { 14 getStudentList(){ 15 this.$http.get('http://127.0.0.1:3000/api/getStuList').then(response => { 16 this.students = response.body.message; 17 }, response => { 18 alert('网络发生错误!'); 19 }); 20 }, 21 createNewStu(){ 22 this.$http.post('http://127.0.0.1:3000/api/insertStuList', this.newStudent, {emulateJSON:true}).then(response => { 23 // 4.1 判断 24 if(response.body.success_code === 200){ // 插入成功 25 this.getStudentList(); 26 } 27 }, response => { 28 alert('插入数据失败') 29 }); 30 // 5. 清空数据 31 this.newStudent = {name: '', sex: '男', age: 0, phone: ''} 32 }, 33 // 删除记录 34 delStudent(index){ 35 // this.students.splice(index, 1); 36 this.$http.post('http://127.0.0.1:3000/api/delStuList', {id:index}, {emulateJSON:true}).then(response => { 37 // 4.1 判断 38 if(response.body.success_code === 200){ // 插入成功 39 this.getStudentList(); 40 } 41 }, response => { 42 alert('插入数据失败') 43 }); 44 } 45 } 46 }); 47 </script>
1 new Vue({ 2 el: '#app', 3 mounted(){ 4 this.getStudentList(); 5 }, 6 data: { 7 students: [], 8 newStudent: {name: '', sex: '男', age: 0, phone: ''} 9 }, 10 methods: { 11 // 获取学生列表 12 getStudentList(){ 13 //字符串转为json 14 this.students = JSON.parse(window.localStorage.getItem('students') || '[]'); 15 }, 16 // 插入记录 17 createNewStu(){ 18 // 4. 插入新纪录 19 this.students.unshift(this.newStudent); 20 //对象转为字符串 21 localStorage.setItem('students', JSON.stringify(this.students)); 22 // 5. 清空数据 23 this.newStudent = {name: '', sex: '男', age: 0, phone: ''} 24 }, 25 // 删除记录 26 delStudent(index){ 27 this.students.splice(index, 1); 28 localStorage.setItem('students', JSON.stringify(this.students)); 29 } 30 } 31 });
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/167484.html原文链接：https://javaforall.net
