vue.js实现图书管理功能
人气:0
<!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="vue.js"></script>
</head>
<body>
<div id="app">
<table rules="rows" frame="hsides" bordercolor="black" width="600px">
<tr v-for="book in books " text-align="center">
<th>序号：</th>
<td>{{book.id}}</td>
<th>书名：</th>
<td>{{book.name}}</td>
<th>作者：</th>
<td>{{book.author}}</td>
<th>价格：</th>
<td>{{book.price}}</td>
<td>
<button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
</td>
</tr>
</table>
<br>
<div id="add-book">
<legend>添加书籍</legend>
<br>
<div>
<label for="">书名</label>
<input type="text" v-model="book.name">
</div>
<div>
<label for="">作者</label>
<input type="text" v-model="book.author">
</div>
<div>
<label for="">价格</label>
<input type="text" v-model="book.price">
</div>
<br>
<button v-on:click="addBook()">添加</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: '曹雪芹',
name: '红楼梦',
price: 32.0
}, {
id: 2,
author: '施耐庵',
name: '水浒传',
price: 30.0
}, {
id: 3,
author: '罗贯中',
name: '三国演义',
price: 24.0
}, {
id: 4,
author: '吴承恩',
name: '西游记',
price: 20.0
}]
},
methods: {
addBook: function() {
//计算书的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//将input中的数据重置
this.book = {};
},
delBook: function(book) {
this.books.splice(this.books.indexOf(book),1);
}
}
})
</script>
</body>
</html>
您可能感兴趣的文章:
加载全部内容