2021-7-12 VUE的增刪改查功能簡單運用
阿新 • • 發佈：2021-07-12
Vue增刪改查簡易例項
<!DOCTYPE html> <html> <head> <title> </title> <style type="text/css"> .ulStyle{ list-style-type: none; margin: 10px 30px; } .divStyle{ width: 600px; height: 400px; border: 1px solid grayView Code; margin: 100px 400px; background-color: gray; } </style> </head> <body> <div id="app" class="divStyle"> <div style="margin: 20px;">編號：<input type="text" name="" v-model="book.id" :disabled="flat">書名：<input type="text" name="" v-model.lazy="book.bookName"><input type="button" name="" value="新增" @click="handle"></div> <div style="background-color: orange; height: 100%;width: 100%;"> <ul style="margin-top:20px;"> <li class="ulStyle" v-for="item in books">{{item.id}}---{{item.bookName}}-------<a href="" @click.prevent="toEdit(item.id)">修改</a>||<a href="" @click.prevent="del(item.id)">刪除</a></li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ flat:false, book:{id:'',bookName:'',date:''}, books:[{ id:1, bookName:'鬥破蒼穹', date:'' },{ id:2, bookName:'遮天', date:'' },{ id:3, bookName:'靈域', date:'' }] }, methods:{ handle:function(){ if (this.flat) { this.books.some((item) => { if (item.id==this.book.id) { item.bookName=this.book.bookName; console.log(this.book.bookName); this.flat=false; this.book={}; return true; }}); }else{ console.log(this.book); this.books.push(this.book); this.book={}; } }, toEdit:function(id){ var oldbook=this.books.filter(function(item){ return item.id==id; }); this.book.id=oldbook[0].id; this.book.bookName=oldbook[0].bookName; this.flat=true; }, del:function(id){ /* var index= this.books.findIndex(function(item){ return item.id==id; }); this.books.splice(index,1);*/ this.books=this.books.filter(function(item){ return item.id!=id; }); } } }); </script> </body> </html>