Vue-08-一个小的图书馆里案例
基于之前的知识一个简易的图书管理系统：需要用到bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h2>图书管理系统</h2>
</div>
<div class="panel-body from-inline">
<label for="">
id: <input type="text" class="form-control" v-model="id">
</label>
<label for="">
图书名称: <input type="text" class="form-control" v-model="name">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
</div>
</div>
<table class="table table-bordered table-hover">
<thread>
<tr>
<th>id</th>
<th>图书名称</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thread>
<tbody>
<tr v-for="item in arr":key="item.id">
<td v-text="item.id"></td>
<td v-text="item.name"></td>
<td v-text="item.time"></td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({ // 创建Vue的实例
el: .app,
data:{
arr: [
{id:1,name:三国演义,time:new Date()},
{id:2,name:红楼梦,time:new Date()},
{id:3,name:西游记,time:new Date()},
{id:4,name:水浒传,time:new Date()},
],
id:,
name:
},
methods:{
add(){
this.arr.push({id:this.id,name:this.name,time:new Date()});
this.id=this.name=;
},
del(id){
var index=this.arr.findIndex(item=>{
if(item.id==id){
return true;
}
})
this.arr.splice(index,1)
}
}
})
</script>
</body>
</html>
运行结果