Vue实现图书管理案例

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

案例效果

案例思路

1、图书列表

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

2、添加图书

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

3、修改图书

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

4、删除图书

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

5、常用特性应用场景

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

代码

基本样式

静态布局

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实现图书管理系统
• Vue实现图书管理小案例
• vue.js实现图书管理功能
• 基于vue.js快速搭建图书管理平台
• vue实现图书管理demo详解
• 基于Vue实现图书管理功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！