The examples in this article share with you the specific code to implement the library management function 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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=""></script>
</head>
<body>
<div >
<table rules="rows" frame="hsides" bordercolor="black" width="600px">
<tr v-for="book in books " text-align="center">
<th>Serial number：</th>
<td>{{}}</td>
<th>Book title：</th>
<td>{{}}</td>
<th>author：</th>
<td>{{}}</td>
<th>price：</th>
<td>{{}}</td>
<td>
<button type="button" class="btn btn-danger" @click="delBook(book)">delete</button>
</td>
</tr>
</table>
<br>
<div >
<legend>Add books</legend>
<br>
<div>
<label for="">Book title</label>
<input type="text" v-model="">
</div>
<div>
<label for="">author</label>
<input type="text" v-model="">
</div>
<div>
<label for="">price</label>
<input type="text" v-model="">
</div>
<br>
<button v-on:click="addBook()">Add to</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: 'Cao Xueqin',
name: 'Dream of Red Mansions',
price: 32.0
}, {
id: 2,
author: 'Shi Nai',
name: 'Water Margin',
price: 30.0
}, {
id: 3,
author: 'Luo Guanzhong',
name: 'Romance of the Three Kingdoms',
price: 24.0
}, {
id: 4,
author: 'Wu Chengen',
name: 'Journey to the West',
price: 20.0
}]
},
methods: {
addBook: function() {
//The id of the calculation book = + 1;
();
//Reset the data in the input = {};
},
delBook: function(book) {
((book),1);
}
}
})
</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.