Vue实现图书管理案例


Posted in Vue.js onJanuary 20, 2021

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

案例效果

Vue实现图书管理案例

案例思路

1、图书列表

  • 实现静态列表效果
  • 基于数据实现模板效果
  • 处理每行的操作按钮

2、添加图书

  • 实现表单的静态效果
  • 添加图书表单域数据绑定
  • 添加按钮事件绑定
  • 实现添加业务逻辑

3、修改图书

  • 修改信息填充到表单
  • 修改后重新提交到表单
  • 重用添加和修改方法

4、删除图书

  • 删除按钮绑定时间处理方法
  • 实现删除业务逻辑

5、常用特性应用场景

  • 过滤器(格式化日期)
  • 自定义指令(获取表单焦点)
  • 计算属性(统计图书数量)
  • 侦听器(验证图书和编号的存在性)
  • 生命周期(图书数据处理)

代码

基本样式

<style type="text/css">
    .grid {
      margin: auto;
      width: 550px;
      text-align: center;
    }

    .grid table {
      width: 100%;
      border-collapse: collapse;
    }

    .grid th,
    td {
      padding: 10;
      border: 1px dashed orange;
      height: 35px;
    }

    .grid th {
      background-color: orange;
    }

    .grid .book {
      width: 550px;
      padding-bottom: 10px;
      padding-top: 5px;
      background-color: lawngreen;
    }

    .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: lawngreen;
      border-top: 1px solid orange;
    }
</style>

静态布局

<div id="app">
    <div class='grid'>
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <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>
      <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>
</div>

效果实现

<script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    Vue.directive('focus', {
      inserted: function (el) {
        el.focus();
      }
    })
    Vue.filter('format', function (value, arg) {
      function dateFormat(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 dateFormat(value, arg);
    })
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        submitFlag: false,
        id: '',
        name: '',
        books: []
      },
      methods: {
        handle: function () {
          if (this.flag) {
            // 编辑操作
            // 就是根据当前id去更新数组中对应的数据
            this.books.some((item) => {
              if (item.id == this.id) {
                item.name = this.name
                // 完成更新操作后终止循环
                return true;
              }
            })
            this.flag = false;
          } else {
            // 添加图书
            var book = {};
            book.id = this.id;
            book.name = this.name;
            this.data = '';
            this.books.push(book);
          }
          // 清空表单
          this.id = '';
          this.name = '';
        }, toEdit: function (id) {
          // 禁止修改id
          this.flag = true;
          // 根据id查询出要编辑的数据
          var book = this.books.filter(function (item) {
            return item.id == id;
          });
          console.log(book)
          // 把获取到的id提交到表单
          this.id = book[0].id;
          this.name = book[0].name;
        },
        deleteBook: function (id) {
          // 删除图书
          // 根据id从数组中查找元素的索引
          // var index = this.books.findIndex(function (item) {
          //   return item.id == id;
          // });
          // 根据索引删除数组元素
          // this.books.splice(index, 1)
          // -----------------
          // 方法2 通过filter方法进行删除
          this.books = this.books.filter(function (item) {
            return item.id != id;
          })
        }
      },
      computed: {
        total: function () {
          // 计算图书的总数
          return this.books.length;
        }
      },
      watch: {
        name: function (val) {
          // 验证图书名称是否已经存在
          var flag = this.books.some(function (item) { return item.name == val; })
          if (flag) {
            // 图书名存在
            this.submitFlag = true
          } else {
            // 图书名不存在
            this.submitFlag = false
          }
        }

      },
      mounted: function () {
        // 该生命周期钩子函数被出发的时候。模板已经可以使用
        // 一般此时用于获取后台数据,然后把数据填充到模板
        var data = [{
          id: 1,
          name: '三国演义',
          date: 252597867777

        }, {
          id: 2,
          name: '水浒传',
          date: 564634563453
        }, {
          id: 3,
          name: '红楼梦',
          date: 345435345343
        }, {
          id: 4,
          name: '西游记',
          date: 345345346533
        }]
        this.books = data
      }
    });
</script>

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

Vue.js 相关文章推荐
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
解读Vue组件注册方式
May 15 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
You might like
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
深入php之规范编程命名小结
2013/05/15 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php Session无效分析资料整理
2016/11/29 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
numpy自动生成数组详解
2017/12/15 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
学生意外伤害赔偿协议书
2014/09/17 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
投诉书范文
2015/07/02 职场文书
2016年教代会开幕词
2016/03/04 职场文书
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers