您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天就跟大家聊聊有关使用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>看完上述内容，你们对使用vue.js怎么实现一个图书管理功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。