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+Element实现增删改查的示例源码
Nov 23 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue中div禁止点击事件的实现
Apr 02 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
python控制台英汉汉英电子词典
2020/04/23 Python
深入浅析Python字符编码
2015/11/12 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python版DDOS攻击脚本
2019/06/12 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
高中毕业自我评价
2014/02/08 职场文书
制作部班长职位说明书
2014/02/26 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2015年党员承诺书
2015/01/21 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
小学教师教学反思
2016/02/24 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript