基于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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JS实现多功能计算器
Oct 28 Javascript
element tree树形组件回显数据问题解决
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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP 验证码的实现代码
2011/07/17 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Django实现基于类的分页功能
2019/10/31 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
数学系毕业生求职信
2014/05/29 职场文书
信用卡工作证明范本
2015/06/19 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android