vue.js实现图书管理功能
更新时间：2019年09月24日 12:04:17 作者：Dwell_hls
这篇文章主要为大家详细介绍了vue.js实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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实战记录之登陆页面实现的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要为大家介绍了Pinia进阶setup函数式写法封装到企业项目实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue.js中的绑定样式实现，展开的内容呦style绑定样式和绑定class样式，具体相关内容需要的小伙伴可以参考下面文章介绍2022-05-05
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
详解Vue webapp项目通过HBulider打包原生APP
这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了vue2与vue3的生命周期对比，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
vue+element-ui+axios多文件上传的实现并显示整体进度
这篇文章主要介绍了vue+element-ui+axios多文件上传的实现并显示整体进度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
侦听器和计算属性都可以用于侦听响应式数据的变化,如果需要在数据变化后执行操作,修改依赖项,那么就应该使用侦听器,下面就跟随小编一起来学习一下vue3中侦听器的使用吧2023-09-09
看到好多开源项目都升级了vue3,下面这篇文章主要给大家介绍了关于Vue2项目升级到Vue3的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
最新评论