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 相关文章推荐
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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对象类型判断
2008/08/27 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php牛逼的面试题分享
2013/01/18 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
Python open()文件处理使用介绍
2014/11/30 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python 动态加载的实现方法
2017/12/22 Python
Python中Threading用法详解
2017/12/27 Python
python操作yaml说明
2020/04/08 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
学生思想表现的评语
2014/01/30 职场文书
黄金酒广告词
2014/03/21 职场文书
优秀员工推荐信
2014/05/10 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
期末个人总结范文
2015/02/13 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
Java界面编程实现界面跳转
2022/06/16 Java/Android