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 相关文章推荐
JS清除IE浏览器缓存的方法
Jul 26 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
js 作用域和变量详解
Feb 16 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
JS快速实现简单计算器
Apr 08 Javascript
详解vue高级特性
Jun 09 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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的时间戳与具体时间转化的简单实现
2016/06/13 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
详解【python】str与json类型转换
2019/04/29 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python线程的几种创建方式详解
2019/08/29 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
工程部文员岗位职责
2015/02/04 职场文书
神龙架导游词
2015/02/11 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
诚实守信主题班会
2015/08/13 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技