This article shares the specific code for Vue to implement book management for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grid{
margin:auto;
width:500px;
text-align:center;
}
.grid table{
width:100%;
border-collapse:collapse;
}
.grid th,td{
padding:10px;
border:1px solid orange;
height:35px;
line-height:35px;
}
.grid th{
background-color:orange;
}
.book{
background-color:orange;
border-bottom:1px solid #ccc;
padding:5px;
}
input{
width:150px;
outline:none;
}
.grid .total{
height:30px;
line-height:30px;
background-color:orange;
border-bottom:1px solid #ccc;
}
</style>
</head>
<body>
<div >
<div class="grid">
<div>
<h1>Book Management</h1>
<div class="book">
<label for="id">serial number：</label>
<input type="text" v-model='id' :disabled='flag' v-focus>
<label for="name">name：</label>
<input type="text" v-model='name'>
<button @click='handle' :disabled='submitFlag'>submit</button>
</div>
</div>
<div class="total">
<span>Total number of books：</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>serial number</th>
<th>name</th>
<th>time</th>
<th>operate</th>
</tr>
</thead>
<tbody>
<tr :key='' v-for='item in books'>
<td>{{}}</td>
<td>{{}}</td>
<td>{{ | format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<a href="" @='toEdit()'>Revise</a>
<span>|</span>
<a href="" @='deleteBook()'>delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="js/"></script>
<script>
//Custom command ('focus',{
inserted:function(el){
();
}
})
//Filter (formatted date) ('format', function(value, arg) {
function dataFormat(date, format) {
if (typeof date === "string") {
var mts = (/(\/Date\((\d+)\)\/)/);
if (mts && >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || () == "Invalid Date") {
return "";
}
var map = {
"M": () + 1, //moon "d": (), //day "h": (), //Hour "m": (), //point "s": (), //Second "q": ((() + 3) / 3), //Quarterly "S": () //millisecond };
format = (/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if ( > 1) {
v = '0' + v;
v = ( - 2);
}
return v;
} else if (t == 'y') {
return (() + '').substr(4 - );
}
return all;
});
return format;
}
return dataFormat(value, arg);
})
var vm=new Vue({
el:'#app',
data:{
flag:false,
submitFlag:false,
id:'',
name:'',
books:[]
},
methods:{
handle:function(){
if(){
//Modify operation: update the corresponding data in the array according to the current id //This in the arrow function is not window //some method determines when the loop is terminated ((item)=>{
if(==){
=;
//After completing the update operation, the loop must be terminated return true;
}
});
=false;
}else{
//Add operation //Add a book var book={};
=;
=;
=new Date();
(book);
}
//Clear the form ='';
='';
},//handle ends toEdit:function(id){
//Disable to modify id =true;
//Query the data to be edited based on the id var book=(function(item){
return ==id;
});
//Fill the obtained information into the form =book[0].id;
=book[0].name;
},//toEdit ends deleteBook:function(id){
//Delete the book //Find the index of the element from the array based on id var index=(function(item){
return ==id;
});
//Delete array elements according to index (index,1);
//Method 2: Delete through filter method //=(function(item){
//return !=id;
//});
}//deleteBook ends },
computed:{
total:function(){
//Calculate the total number of books return ;
}
},//Computed ended watch:{
name:function(val){
//Verify whether the book name already exists var flag=(function(item){
return ==val;
});
if(flag){
//The book name exists =true;
}else{
=false;
}
}
},//Watch ends mounted:function(){
//When the life cycle hook function is triggered, the template can already be used //It is generally used to obtain background data and then fill the data into the template //Simulation interface var data=[{
id:1,
name:'Romance of the Three Kingdoms',
date:1585609975000
},{
id:2,
name:'Water Margin',
date:1586609975000
},{
id:3,
name:'Dream of Red Mansions',
date:1587609975000
},{
id:4,
name:'Journey to the West',
date:1588609975000
}];
=data;
}
});
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.