基于Vue实现图书管理功能


Posted in Javascript onOctober 17, 2017

本文实例为大家分享了vue简单的图书管理具体代码,供大家参考,具体内容如下

<table class="table table-bg table-border table-bordered">
 <tr>
  <th>ID</th>
  <th>书名</th>
  <th>作者</th>
  <th>价格</th>
  <th>操作</th>
 </tr>
 <tr v-for="(book,index) in books">
  <td>{{book.id}}</td>
  <td>{{book.name}}</td>
  <td>{{book.author}}</td>
  <td>{{book.price}}</td>
  <td>
   <button class="btn" @click="delBook(index)">删除</button>
  </td>
 </tr>
</table>

<fieldset>
 <legend>添加新书</legend>
 <p>书名:<input type="text" v-model="newBook.name"></p>
 <p>作者:<input type="text" v-model="newBook.author"></p>
 <p>价格:<input type="text" v-model="newBook.price"></p>
 <p><button class="btn" @click="addBook">添加</button></p>
</fieldset>

<script>
new Vue({
 el:'#books',
 data:{
  books:[
   {id:1, name:'红楼梦', author:'曹雪芹', price:'1'},
   {id:2, name:'西游记', author:'吴承恩', price:'2'},
   {id:3, name:'水浒传', author:'施耐庵', price:'3'}
  ],
  newBook:{
   id:0,
   name:'',
   author:'',
   price:''
  }
 },
 methods:{
  delBook:function(idx){
   if(window.confirm('确认要删除?')){
    this.books.splice(idx, 1);
   }

  },
  addBook:function(){
   // 约束
   if(this.newBook.name.length == 0) {
    alert('书名不能为空');
    return;
   } 

   if(this.newBook.author.length == 0){
    alert('书的作者不能为空');
    return;
   }

   if(this.newBook.price.length == 0){
    this.newBook.price = '0'
   } 

   // 计算插入id
   var maxId = 0;
   for(var i=0; i<this.books.length; i++){
    if(maxId<this.books[i].id){
     maxId = this.books[i].id;
    }
   }
   this.newBook.id = maxId+1;

   // 插入到 books中
   this.books.push(this.newBook);

   // 清空新书
   this.newBook = {};
  }
 }
});
</script>

效果图:

基于Vue实现图书管理功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
Vue的Options用法说明
Aug 14 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 #Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 #Javascript
node使用Koa2搭建web项目的方法
Oct 17 #Javascript
Node 自动化部署的方法
Oct 17 #Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 #Javascript
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
vue获取input输入值的问题解决办法
Oct 17 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
php语法检查的方法总结
2019/01/21 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
js输出列表实现代码
2010/09/12 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
.net开发工程师面试题
2014/02/25 面试题
软件测试笔试题
2012/10/25 面试题
期末评语大全
2014/05/04 职场文书
学校2014年度工作总结
2014/12/06 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle