1.学习vue时做的一个小案例，本身案例很简单，经过优化又加些比较常用的功能，比如在添加图书前，先判断编号是否存在，并提示给用户，并且编号文本框只能输入数字等等优化。
2.使用到数组数据，方法，监视，挂载钩子，数据是本地数据，方法实现了大部分的功能函数，监视属性实现动态检查数据的合法性，挂载实现了计时器的触发，每秒查询本地时间并且做了格式化，主要是修改与添加图书时，自动调用本地的时间日期。
-案例所有代码在文章末尾-
1.效果图
静态图
动态图
2.添加与修改图书
这个vue方法实现增加与修改的图书，一个方法解决增加与修改图书，实现代码复用
addbook: function () {
if (this.flag) {
// changetime;
this.books.some((item) => {
if (item.id == this.idmsg) {
item.date = this.dates;
item.name = this.namemsg;
this.tipmsg = ""
return true;
}
})
} else {
arr = {
id: this.idmsg,
name: this.namemsg,
date: this.dates
};
this.books.push(arr);
this.tipmsg = ""
}
},
3.删除图书
根据findIndex方法找到需要删除的数组索引，通过splice方法删除（splice是在源数组修改）
del: function (id) {
var index = this.books.findIndex(function (item) {
return item.id == id
})
this.books.splice(index, 1)
},
4.查询图书
通过vue的watch监视属性，动态监视数据的变化，数据一变化就调用函数方法，来查询数组的编号ID是否存在，如果存在或不存在都会通过信息提示给用户。
idmsg: function (val) {
this.idmsg = val.replace(/\D/g, "")
if (this.flag) {
this.tipmsg = ""
} else {
this.books.some((item) => {
if (item.id == val) {
this.tipmsg = "ID已存在"
return true
} else if (val == "") {
this.tipmsg = ""
} else {
this.tipmsg = "ID可用"
}
})
}
}
5.全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
.left {
float: left;
}
.right {
float: right;
}
caption {
font-weight: bold;
font-size: 24px;
}
.clearfix::after {
display: block;
content: "";
height: 0;
clear: both;
}
table {
width: 600px;
margin: auto;
background-color: #f4faed;
/* background-color: #247624; */
border: rebeccapurple solid 1px;
}
th,
td {
text-align: center;
width: 150px;
border: rebeccapurple solid 1px;
}
th {
background-color: #e3f1d1;
}
.tail {
margin: 20px auto;
width: 600px;
font-weight: bold;
font-size: 20px;
/* border: 1px solid brown; */
}
#submit {
display: none;
}
.submit {
font-weight: bold;
margin: 20px auto;
width: 600px;
margin-top: 15px;
/* background-color: aliceblue; */
}
.submit input:nth-of-type(1) {
text-align: center;
width: 100px;
}
.submit input:nth-of-type(2) {
width: 150px;
text-align: center;
}
.submit span {
margin-left: 18px;
}
.submit .go {
margin-left: 8px;
width: 80px;
}
.crrent {
display: none;
}
.show {
display: block;
}
.tipmsg {
font-size: 12px;
color: brown;
width: 240px;
line-height: 14px;
margin-top: 5px;
text-align: center;
/* text-indent: 20px; */
}
</style>
</head>
<body>
<div id="app">
<table>
<caption>图书管理</caption>
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>日期</th>
<th>设置</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in books">
<td>{
{
item.id}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.date}}</td>
<td><a href="#" @click.prevent="change(item.id,item.name)">修改</a><span> | </span> <a href="#"
@click="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
<div class="submit" :class="crrent">
<span>编号：</span><input type="text" v-model.trim="idmsg" :disabled="flag" placeholder="请输入数字">
<span>书名：</span><input type="text" v-model="namemsg">
<input type="button" class="go" v-model="tip" @click="addbook">
<input type="button" class="go" value="取消" @click="cancle">
<div class="tipmsg">{
{
tipmsg}}</div>
</div>
<div class="tail clearfix">
<div class="left"> <span>图书数量：</span><span style="color: brown;font-size: 25px;">{
{
books.length}}</span>
</div>
<div class="right"> <a href="#" @click="sub">添加图书(add)</a></div>
</div>
<!-- {
{
dates}}
<input type="button" value="123" @click="changetime()"> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
dates: "",
tipmsg: "",
flag: false,
idmsg: "",
namemsg: "",
tip: "",
crrent: "crrent",
books: [
{
id: "1",
name: "三国演义",
date: "9-1日15:35",
},
{
id: "2",
name: "水浒传",
date: "9-2日15:35"
},
{
id: "3",
name: "红楼梦",
date: "9-5日15:35"
},
{
id: "4",
name: "西游记",
date: "9-19日15:35"
},
]
}
},
mounted() {
this.changetime();
},
methods: {
changetime: function () {
// var ret = ""
setInterval(
() => {
var dates = new Date()
this.dates = (dates.getMonth() + 1) + "月" + dates.getDate() + "日" + dates.getHours() + ":" + dates.getMinutes() + ":" + dates.getSeconds()
}, 1000)
},
sub: function () {
this.idmsg = "";
this.flag = false
this.crrent = "show"
this.tip = "添加图书"
this.namemsg = "";
this.tipmsg = "";
},
cancle: function () {
this.crrent = "crrent"
},
change: function (id, name) {
this.flag = true;
// console.log(this.flag);
this.crrent = "show"
this.tip = "修改图书"
this.idmsg = id;
this.namemsg = name;
this.tipmsg = "";
},
addbook: function () {
if (this.flag) {
// changetime;
this.books.some((item) => {
if (item.id == this.idmsg) {
item.date = this.dates;
item.name = this.namemsg;
this.tipmsg = ""
return true;
}
})
} else {
arr = {
id: this.idmsg,
name: this.namemsg,
date: this.dates
};
this.books.push(arr);
this.tipmsg = ""
}
},
del: function (id) {
var index = this.books.findIndex(function (item) {
return item.id == id
})
this.books.splice(index, 1)
},
},
watch: {
idmsg: function (val) {
this.idmsg = val.replace(/\D/g, "")
if (this.flag) {
this.tipmsg = ""
} else {
this.books.some((item) => {
if (item.id == val) {
this.tipmsg = "ID已存在"
return true
} else if (val == "") {
this.tipmsg = ""
} else {
this.tipmsg = "ID可用"
}
})
}
}
}
})
</script>
</body>
</html>
