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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
一个域名查询的程序
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
header跳转和include包含问题详解
2012/09/08 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js opener的使用详解
2014/01/11 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
Python中property函数用法实例分析
2018/06/04 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python判断元素是否存在的实例方法
2020/09/24 Python
python 实现简易的记事本
2020/11/30 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
儿子婚宴答谢词
2014/01/09 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
避暑山庄导游词
2015/02/04 职场文书
党支部书记岗位职责
2015/02/15 职场文书
考试没考好检讨书
2015/05/06 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
招商银行工作证明
2015/06/17 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Python道路车道线检测的实现
2021/06/27 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript