使用bootstrap,vue实现图书管理系统，实现增，删，查的功能（不涉及数据库）
<!--文档声明类型
-->
<!DOCTYPE html
>
<!--最外层标签，根标签，lang(language
)表示属性为英语
-->
<html lang
="en">
<!--文档的头标签
-->
<head
>
<!-- 规定文档的字符编码
-->
<meta charset
="UTF-8">
<title
>图书管理系统
</title
>
<!-- 导入vue
.js
-->
<script src
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script
>
<!-- 最新版本的 Bootstrap 核心
CSS 文件
-->
<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">
</head
>
<body
>
<!--id为vue的边界
-->
<div id
="app">
<div
class="container">
<h1
>图书管理系统
</h1
>
<form
class="form-inline">
<div
class="form-group">
<!-- for属性与id属性绑定
-->
<label
for="name">图书名称
</label
>
<!-- type表示为文本类型，name属性用于传值，placeholder为提示语，v
-model
:用于input标签，实现数据的联动
-->
<input type
="text" class="form-control" id
="name" name
="name" placeholder
="请输入图书名称" v
-model
="adding_book.name">
</div
>
<div
class="form-group">
<label
for="author">作者
</label
>
<input type
="text" class="form-control" id
="author" name
="author" placeholder
="请输入作者" v
-model
="adding_book.author">
</div
>
<div
class="form-group">
<label
for="price">价格
</label
>
<input type
="text" class="form-control" id
="price" name
="price" placeholder
="请输入价格" v
-model
="adding_book.price">
</div
>
<!-- v
-on给元素添加事件，click为鼠标点击事件，prevent用来阻止事件的默认行为
-->
<button type
="submit" class="btn btn-primary" v
-on
: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" name
="keywords" placeholder
="请输入关键字" v
-model
="keywords">
</div
>
</form
>
<!-- 表格表头的布局
-->
<table
class="table">
<thead
>
<!-- tablerow表头，tableheadercell表头单元格
-->
<tr
>
<th
>序号
</th
>
<th
>名称
</th
>
<th
>作者
</th
>
<th
>价格
</th
>
<th
>时间
</th
>
<th
>操作
</th
>
</tr
>
</thead
>
<tbody
>
<!-- tabledatacell表中的数据单元
-->
<tr v
-for="(book,index) in book_result">
<td
>{{ index
+1 }}</td
>
<td
>{{ book
.name
}}</td
>
<td
>{{ book
.author
}}</td
>
<td
>{{ book
.price
}}</td
>
<td
>{{ book
.date
|timeFormat
}}</td
>
<td
><button
class="btn btn-danger btn-xs" @click
="del(index)">删除
</button
></td
>
</tr
>
</tbody
>
</table
>
</div
>
</div
>
<!--用于定义客户端脚本
-->
<script
>
new Vue({
el
: '#app',
data
: {
books
: [
{"name": "三国演义", "author": "罗贯中", "price": 100, "date": new Date()}
],
adding_book
: {
name
: "",
author
: "",
price
: 0,
},
keywords
: ""
},
computed
: {
book_result() {
const that
= this;
if (this.keywords
) {
let newBooks
= this.books
.filter(function(item
){
if(item
.name
.indexOf(that
.keywords
) != -1){
return true
}else{
return false
}
});
return newBooks
} else {
return this.books
}
}
},
methods
: {
add() {
let book
= JSON.parse(JSON.stringify(this.adding_book
));
book
.date
= new Date();
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 year
= value
.getFullYear();
let month
= value
.getMonth()+1;
let day
= value
.getDate();
let hour
= value
.getHours();
let minute
= value
.getMinutes();
let second
= value
.getSeconds();
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
}
})
</script
>
</body
>
</html
>
页面如下：
