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接收get传递的值的代码
Nov 30 Javascript
JS检测图片大小的实例
Aug 21 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
js 作用域和变量详解
Feb 16 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
js实现车辆管理系统
Aug 26 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数组指针函数功能及用法示例
2020/02/11 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python获取文件扩展名的方法
2015/07/06 Python
Python实现定时任务
2017/02/08 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
新闻专业学生的自我评价
2014/02/13 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
党员承诺书范文2015
2015/04/27 职场文书
学校捐书倡议书
2015/04/27 职场文书
暂住证明怎么写
2015/06/19 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Java输出Hello World完美过程解析
2021/06/13 Java/Android