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 25 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
事务机电主管工作职责
2014/02/25 职场文书
商务日语专业自荐信
2014/04/17 职场文书
美食节目策划方案
2014/05/31 职场文书
学校推普周活动总结
2015/05/07 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
教师节班会主持词
2015/07/06 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python