七、vue基础--小案例
1、添加图书，删除图书代码如下：
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <script src='vue.js'></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>图书管理系统</title> </head> <body> <div id='app'> <div class="container"> <h1>图书管理系统</h1> <form class="form-inline"> <div class="form-group"> <label for="name">名称：</label> <input type="text" class="form-control" id="name" placeholder="请输入图书名称" v-model="adding_book.name"> </div> <div class="form-group"> <label for="author">作者：</label> <input type="text" class="form-control" id="author" placeholder="请输入作者" v-model="adding_book.author"> </div> <div class="form-group"> <label for="price">价格：</label> <input type="number" class="form-control" id="price" placeholder="请输入价格" v-model="adding_book.price"> </div> <button type="submit" class="btn btn-primary" @click.prevent="add">添加</button> </form> <table class="table"> <thead> <tr> <th>序号</th> <th>名称</th> <th>作者</th> <th>价格</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(book,index) in books" :key="book.name"> <td>{{index+1}}</td> <td>{{book.name}}</td> <td>{{book.author}}</td> <td>{{book.price}}</td> <td>{{book.atime|timeFormat}}</td> <td> <button class="btn btn-xs btn-danger" @click="del(index)">删除</button> </td> </tr> </tbody> </table> </div> </div> <script> new Vue({ el:'#app', data:{ books:[ {"name":"坏蛋是这样练成的1","author":"六道1","price":99,"atime":new Date()}, {"name":"坏蛋是这样练成的2","author":"六道2","price":199,"atime":new Date()}, {"name":"坏蛋是这样练成的3","author":"六道3","price":299,"atime":new Date()} ], adding_book:{ name:"", author:"", price:0 } }, methods:{ add(){ let book = JSON.parse(JSON.stringify(this.adding_book)) book.atime=new Date() // if(book.name==null || book.name == ""){ // alert('name 为 空'); // return; // } this.books.push(book) this.adding_book={ name:"", author:"", price:0 } }, del(index){ this.books.splice(index,1) } }, filters:{ timeFormat:function(value){ value = new Date(value) let nian = value.getFullYear() let yue = value.getMonth()+1 let ri = value.getDate() let shi = value.getHours() let fen = value.getMinutes() let miao = value.getSeconds()<10?('0'+value.getSeconds()):value.getSeconds() return `${nian}-${yue}-${ri} ${shi}:${fen}:${miao}` } } }) </script> </body> </html>
2.搜索图书，代码如下：
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <script src='vue.js'></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <title>图书管理系统</title> </head> <body> <div id='app'> <div class="container"> <h1>图书管理系统</h1> <form class="form-inline"> <div class="form-group"> <label for="name">名称：</label> <input type="text" class="form-control" id="name" placeholder="请输入图书名称" v-model="adding_book.name"> </div> <div class="form-group"> <label for="author">作者：</label> <input type="text" class="form-control" id="author" placeholder="请输入作者" v-model="adding_book.author"> </div> <div class="form-group"> <label for="price">价格：</label> <input type="number" class="form-control" id="price" placeholder="请输入价格" v-model="adding_book.price"> </div> <button type="submit" class="btn btn-primary" @click.prevent="add">添加</button> </form> <form class="form-inline"> <div class="form-group"> <label for="keywords">搜索：</label> <input type="text" class="form-control" id="keywords" placeholder="请输入关键字：" v-model="keywords"> </div> </form> <table class="table"> <thead> <tr> <th>序号</th> <th>名称</th> <th>作者</th> <th>价格</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(book,index) in book_result" :key="book.name"> <td>{{index+1}}</td> <td>{{book.name}}</td> <td>{{book.author}}</td> <td>{{book.price}}</td> <td>{{book.atime|timeFormat}}</td> <td> <button class="btn btn-xs btn-danger" @click="del(index)">删除</button> </td> </tr> </tbody> </table> </div> </div> <script> new Vue({ el:'#app', data:{ books:[ {"name":"坏蛋是这样练成的1","author":"六道1","price":99,"atime":new Date()}, {"name":"坏蛋是这样练成的2","author":"六道2","price":199,"atime":new Date()}, {"name":"坏蛋是这样练成的3","author":"六道3","price":299,"atime":new Date()} ], adding_book:{ name:"", author:"", price:0 }, keywords:"" }, computed:{ book_result(){ const that = this; if(this.keywords){ return this.books.filter(function(item){ if(item.name.indexOf(that.keywords) >=0){ return true }else{ return false } }) }else{ return this.books } } }, methods:{ add(){ let book = JSON.parse(JSON.stringify(this.adding_book)) book.atime=new Date() // if(book.name==null || book.name == ""){ // alert('name 为 空'); // return; // } this.books.push(book) this.adding_book={ name:"", author:"", price:0 } }, del(index){ this.books.splice(index,1) } }, filters:{ timeFormat:function(value){ value = new Date(value) let nian = value.getFullYear() let yue = value.getMonth()+1 let ri = value.getDate() let shi = value.getHours() let fen = value.getMinutes() let miao = value.getSeconds()<10?('0'+value.getSeconds()):value.getSeconds() return `${nian}-${yue}-${ri} ${shi}:${fen}:${miao}` } } }) </script> </body> </html>
