Vue实现图书管理小案例


Posted in Vue.js onDecember 03, 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     .grid{
      margin:auto;
      width:500px;
      text-align:center;
     }
     .grid table{
      width:100%;
      border-collapse:collapse;
     }
     .grid th,td{
      padding:10px;
      border:1px solid orange;
      height:35px;
      line-height:35px;
     }
     .grid th{
      background-color:orange;
     }
     .book{
      background-color:orange;
      border-bottom:1px solid #ccc;
      padding:5px;
     }
     input{
      width:150px;
      outline:none;
     }
     .grid .total{
      height:30px;
      line-height:30px;
      background-color:orange;
      border-bottom:1px solid #ccc;
     }
  </style>
</head>
<body>
<div id="app">
  <div class="grid">
   <div>
     <h1>图书管理</h1>
     <div class="book">
      <label for="id">编号:</label>
      <input type="text" id="id" v-model='id' :disabled='flag' v-focus>
      <label for="name">名称:</label>
      <input type="text" id="name" v-model='name'>
      <button @click='handle' :disabled='submitFlag'>提交</button>
     </div>
   </div>
   <div class="total">
     <span>图书总数:</span>
     <span>{{total}}</span>
   </div>
   <table>
     <thead>
       <tr>
        <th>编号</th>
        <th>名称</th>
        <th>时间</th>
        <th>操作</th>
       </tr>
     </thead>
     <tbody>
     <tr :key='item.id' v-for='item in books'>
       <td>{{item.id}}</td>
       <td>{{item.name}}</td>
       <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
       <td>
         <a href="" @click.prevent='toEdit(item.id)'>修改</a>
         <span>|</span>
         <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
       </td>
     </tr>
     </tbody>
   </table>
</div>
<script src="js/vue.js"></script>
<script>
  //自定义指令
  Vue.directive('focus',{
    inserted:function(el){
      el.focus();
    }
  })
  //过滤器(格式化日期)
  Vue.filter('format', function(value, arg) {
      function dataFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t == 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dataFormat(value, arg);
    })

    var vm=new Vue({
      el:'#app',
      data:{
       flag:false,
       submitFlag:false,
       id:'',
       name:'',
       books:[]
      },
      methods:{
       handle:function(){
         if(this.flag){
          //修改操作:就是根据当前的id去更新数组中对应的数据
          //箭头函数的this不是window
          //some方法判断什么时候终止循环
          this.books.some((item)=>{
            if(item.id==this.id){
              item.name=item.name;
              //完成更新操作之后,要终止循环
              return true;
            }
          });
          this.flag=false;
         }else{
          //添加操作
          //添加图书
          var book={};
          book.id=this.id;
          book.name=this.name;
          book.date=new Date();
          this.books.push(book);
         }
         //清空表单
         this.id='';
         this.name='';
       },//handle结束
       toEdit:function(id){
         //禁止修改id
         this.flag=true;
         //根据id查询出要编辑的数据
         var book=this.books.filter(function(item){
           return item.id==id;
         });
         //把获取的信息填充到表单
         this.id=book[0].id;
         this.name=book[0].name;
       },//toEdit结束
       deleteBook:function(id){
         //删除图书
         //根据id从数组中查找元素的索引
         var index=this.books.findIndex(function(item){
           return item.id==id;
         });
         //根据索引删除数组元素
         this.books.splice(index,1);
         
         //方法二:通过filter方法进行删除
         //this.books=this.books.filter(function(item){
          //return item.id!=id;
         //});
       }//deleteBook结束
      },
      computed:{
       total:function(){
         //计算图书的总数
         return this.books.length;
       }
      },//computed结束
      watch:{
       name:function(val){
         //验证图书名称是否已经存在
         var flag=this.books.some(function(item){
          return item.name==val;
         });
         if(flag){
          //图书名称存在
          this.submitFlag=true;
         }else{
          this.submitFlag=false;
         }
       }
      },//watch结束
      mounted:function(){
       //该生命周期钩子函数被触发的时候,模板已经可以使用
       //一般用于获取后台数据,然后把数据填充到模板
       //模拟接口
       var data=[{
         id:1,
         name:'三国演义',
         date:1585609975000
       },{
         id:2,
         name:'水浒传',
         date:1586609975000
       },{
         id:3,
         name:'红楼梦',
         date:1587609975000
       },{
         id:4,
         name:'西游记',
         date:1588609975000
       }];
       this.books=data;
      }
    });
</script>
</body>
</html>

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

Vue.js 相关文章推荐
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
Vue router安装及使用方法解析
Dec 02 #Vue.js
vue3.0中setup使用(两种用法)
Dec 02 #Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 #Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 #Vue.js
You might like
php实现复制移动文件的方法
2015/07/29 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
python list转矩阵的实例讲解
2018/08/04 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
管理科学大学生求职信
2013/11/13 职场文书
《藏戏》教学反思
2014/02/11 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
公司离职证明范本
2014/10/17 职场文书
python如何在word中存储本地图片
2021/04/07 Python