本文实例为大家分享了vue.js实现图书管理功能的具体代码，供大家参考，具体内容如下
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容