Vue指令练习实例-学生信息录入
生活随笔
收集整理的這篇文章主要介紹了
Vue指令练习实例-学生信息录入
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很好的一個可以感受Vue.js的MVVM模型，數據和模型雙向綁定的實例練習。
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>vue指令</title><style>#app{margin: 50px auto;width:600px;}fieldset {border:1px solid orangered;margin-bottom: 20px;}fieldset input {width: 200px;height:20px;margin: 10px 0;}table {width: 600px;border:2px solid orangered;text-align: center;}thead {background-color: orangered;}</style> </head> <body><div id="app"><!--第一部分--><fieldset><legend>學生信息錄入系統</legend><div><span>姓名:</span><input type="text" placeholder="請輸入姓名" v-model="newStudent.name"></div><div><span>年齡:</span><input type="text" placeholder="請輸入年齡" v-model="newStudent.age"></div><div><span>性別:</span><select v-model="newStudent.sex"><option value="男">男</option><option value="女">女</option></select></div><div><span>手機:</span><input type="text" placeholder="請輸入手機號碼" v-model="newStudent.phone"></div><button @click="createNewStudent()">創建新用戶</button></fieldset><!--第二部分--><table><thead><tr><td>姓名</td><td>性別</td><td>年齡</td><td>手機</td><td>刪除</td></tr></thead><tbody><tr v-for="(p,index) in persons"><td>{{p.name}}</td><td>{{p.sex}}</td><td>{{p.age}}</td><td>{{p.phone}}</td><td><button @click="deleteStudentMsg(index)">刪除</button></td></tr></tbody></table></div><script src="js/vue.min.js"></script><script>new Vue({el:'#app',data:{persons:[{name:'張三',age:20,sex:'男',phone:'15473124380'},{name:'李四',age:20,sex:'男',phone:'15373124380'},{name:'王五',age:20,sex:'男',phone:'15273124380'},{name:'趙六',age:20,sex:'女',phone:'15173124380'},],newStudent : {name:'',age:0,sex:'男',phone:''}},methods: {//創建一條新紀錄createNewStudent() {//姓名不能為空if(this.newStudent.name ==='') {alert('姓名不能為空');return;}//年齡不能小于0if(this.newStudent.age <= 0) {alert('請輸入正確的年齡');return;}//年齡不能小于0if(this.newStudent.phone ==='') {alert('手機號碼不正確');return;}//往數組中添加一條新紀錄this.persons.unshift(this.newStudent);//清空記錄this.newStudent = {name:'',age:0,sex:'男',phone:''}},//刪除一條學生記錄deleteStudentMsg(index) {this.persons.splice(index,1);}}});</script> </body> </html>轉載于:https://www.cnblogs.com/zhangmingzhao/p/8290528.html
總結
以上是生活随笔為你收集整理的Vue指令练习实例-学生信息录入的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle之 RA-00054: re
- 下一篇： 基于Vue.js的后台管理系统组件开发