vue.js实现图书管理功能


Posted in Javascript onSeptember 24, 2019

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
layui table单元格事件修改值的方法
Sep 24 #Javascript
Javascript Dom元素获取和添加详解
Sep 24 #Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 #Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 #Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 #Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 #Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 #Javascript
You might like
php中call_user_func函数使用注意事项
2014/11/21 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python shelve模块实现解析
2019/08/28 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python同时迭代多个序列的方法
2020/07/28 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
法人授权委托书范本
2014/09/17 职场文书
大学生助学金感谢信
2015/01/21 职场文书
西安兵马俑导游词
2015/02/02 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
SQL Server删除表中的重复数据
2022/05/25 SQL Server