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关于导航条背景切换效果实现示例
Sep 04 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
js如何打印object对象
Oct 16 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
es6数值的扩展方法
Mar 11 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
Typescript的三种运行方式(小结)
Sep 18 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
对比分析json及XML
2014/11/28 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python实现读取命令行参数的方法
2015/05/22 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
如何利用python进行时间序列分析
2020/08/04 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
自荐书格式
2013/12/01 职场文书
读书心得体会
2013/12/28 职场文书
职位说明书范文
2014/05/07 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python