<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>图书管理系统</title> ????????<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> ???????<script src="js/vue.js"></script> ???????<style type="text/css"> ???????????#update-book{ ???????????????display: none; ???????????} ???????</style> ???</head> ????<body> ???????<div class="container"> ???????????<div class="col-md-6 col-md-offset-3"> ???????????????<h1>Vue demo</h1> ????????????????????????????????<div id="app"> ???????????????????<table class="table table-hover "> ???????????????????????<br /> ???????????????????????<thead> ???????????????????????????<tr> ???????????????????????????????<th>序号</th> ???????????????????????????????<th>书名</th> ???????????????????????????????<th>作者</th> ???????????????????????????????<th>价格</th> ???????????????????????????????<th>操作</th> ???????????????????????????</tr> ???????????????????????</thead> ???????????????????????<tbody> ???????????????????????????<tr v-for="book in filterBooks"> ???????????????????????????????<td>{{book.id}}</td> ???????????????????????????????<td>{{book.name}}</td> ???????????????????????????????<td>{{book.author}}</td> ???????????????????????????????<td>{{book.price}}</td> ???????????????????????????????<template v-if="book.id%2==0"> ???????????????????????????????????<td class="text-left"> ???????????????????????????????????????<button type="button" class="btn btn-success" class="del" @click="delBook(book)">删除</button> ???????????????????????????????????????<button type="button" class="btn btn-success" ?@click="updateBook(book)" >修改</button> ???????????????????????????????????????????????????????????????????????</td> ???????????????????????????????</template> ???????????????????????????????<template v-else> ???????????????????????????????????<td class="text-left"> ???????????????????????????????????????<button type="button" class="btn btn-danger" class="del" @click="delBook(book)">删除</button> ???????????????????????????????????????<button type="button" class="btn btn-danger" @click="updateBook(book)" >修改</button> ???????????????????????????????????????????????????????????????????????</td> ???????????????????????????????</template> ???????????????????????????</tr> ???????????????????????</tbody> ???????????????????</table> ????????????????????????????????????????<div id="add-book"> ???????????????????????<div class="row" style="margin-bottom: 30px;"> ???????????????????????????<div class="col-md-3" style="text-align: right;font-size: 16px;line-height: 30px;"> ???????????????????????????????请输入书名： ???????????????????????????</div> ???????????????????????????<div class="col-md-5"> ???????????????????????????????<input type="text" class="form-control" v-model="search"/> ???????????????????????????</div> ???????????????????????</div> ???????????????????????<h3>添加书籍</h3> ???????????????????????<hr /> ???????????????????????<div class="form-group"> ???????????????????????????<label for="group">书名</label> ???????????????????????????<input type="text" class="form-control" v-model="book.name" id="group"> ???????????????????????</div> ???????????????????????<div class="form-group"> ???????????????????????????<label for="author">作者</label> ???????????????????????????<input type="text" class="form-control" ?v-model="book.author" id="author"> ???????????????????????</div> ???????????????????????<div class="form-group"> ???????????????????????????<label for="price">价格</label> ???????????????????????????<input type="text" class="form-control" ?v-model="book.price" id="price"> ???????????????????????</div> ???????????????????????<button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button> ???????????????????</div> ???????????????????????????????????????<div id="update-book"> ???????????????????????<h3>修改书籍</h3> ???????????????????????<hr /> ???????????????????????<div class="form-group"> ???????????????????????????<label for="group1">书名</label> ???????????????????????????<input type="text" class="form-control" v-model="book.name" id="group1"> ???????????????????????</div> ???????????????????????<div class="form-group"> ???????????????????????????<label for="author1">作者</label> ???????????????????????????<input type="text" class="form-control" id="author1" v-model="book.author"> ???????????????????????</div> ???????????????????????<div class="form-group"> ???????????????????????????<label for="price1">价格</label> ???????????????????????????<input type="text" class="form-control" id="price1" ?v-model="book.price"> ???????????????????????</div> ???????????????????????<button class="btn btn-primary btn-block" ?@click="updatesBook()">完成</button> ???????????????????</div> ???????????????</div> ???????????</div> ???????</div> ???????<script type="text/javascript" src="js/jquery-3.1.1.js"></script> ???????<script src="js/demo.js" type="text/javascript" charset="utf-8"></script> ????</body></html>js文件var id = 0;var app = new Vue({ ???el:‘#app‘, ???methods:{ ???????addBook:function(){ ???????????this.book.id = this.books.length+1; ???????????this.books.push(this.book); ???????????this.book={}; ???????}, ???????delBook:function(book){ ???????????var blength=this.books.length; ???????????this.books.splice(book.id-1,1); ???????????for(var i=0;i<blength;i++){ ???????????????if (book.id<this.books[i].id) { ???????????????????this.books[i].id -= 1; ???????????????} ???????????} ???????}, ???????updateBook:function(book){ ???????????$("#add-book").css("display","none"); ???????????$("#update-book").css("display","block"); ???????????id = book.id; ???????????????????}, ???????updatesBook:function(){ ???????????this.book.id = id; ???????????this.books.splice(id-1,1,this.book); ???????????$("#add-book").css("display","block"); ???????????$("#update-book").css("display","none"); ???????????this.book={}; ???????} ???}, ???computed:{ ???????filterBooks:function(){ ???????????var books=this.books; ???????????var search=this.search; ???????????/*if (!search) { ???????????????return books; ???????????} ???????????var arr=[]; ???????????for(var i=0;i<books.length;i++){ ???????????????var index = ???books[i].name.indexOf(search); ???????????????if (index>-1) { ???????????????????arr.push(books[i]); ???????????????} ???????????} ???????????return arr;*/ ???????????????????????//第二种方法 ???????????return books.filter(function(book){ ???????????????return book.name.toLowerCase().indexOf(search.toLowerCase())!=-1; ???????????}); ???????} ???}, ???data:{ ???????book:{ ???????????id:0, ???????????author:‘‘, ???????????name:‘‘, ???????????price:‘‘ ???????}, ???????books:[{ ???????????id:1, ???????????author:‘曹雪芹‘, ???????????name:‘红楼梦‘, ???????????price:32.0 ???????}, ???????{ ???????????id:2, ???????????author:‘施耐庵‘, ???????????name:‘水浒传‘, ???????????price:55.0 ???????}, ???????{ ???????????id:3, ???????????author:‘罗贯中‘, ???????????name:‘三国演义‘, ???????????price:41.0 ???????}, ???????{ ???????????id:4, ???????????author:‘吴承恩‘, ???????????name:‘西游记‘, ???????????price:39.0 ???????}], ???????search:"" ???}})vue.js 图书管理系统
原文地址：http://www.cnblogs.com/HRurl/p/7782868.html