zoukankan      html  css  js  c++  java
  • Vue项目:图书管理系统(未使用组件化开发)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .grid {
          margin: auto;
          width: 530px;
          text-align: center;
        }
        .grid table {
          border-top: 1px solid #C2D89A;
          width: 100%;
          border-collapse: collapse;
        }
        .grid th,td {
          padding: 10;
          border: 1px dashed #F3DCAB;
          height: 35px;
          line-height: 35px;
        }
        .grid th {
          background-color: #F3DCAB;
        }
        .grid .book {
          padding-bottom: 10px;
          padding-top: 5px;
          background-color: #F3DCAB;
        }
        .grid .total {
          height: 30px;
          line-height: 30px;
          background-color: #F3DCAB;
          border-top: 1px solid #C2D89A;
        }
      </style>
    </head>
    <body>
      <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: {
            submitFlag:false,
            flag: 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.books.push(book);
                // 清空表单
                this.id = '';
                this.name = '';
              }
              // 清空表单
              this.id = '';
              this.name = '';
            },
            toEdit: function(id){
              // 禁止修改ID
              this.flag = true;
              console.log(id)
              // 根据ID查询出要编辑的数据
              var book = this.books.filter(function(item){
                return item.id == id;
              });
              console.log(book)
              // 把获取到的信息填充到表单
              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);
              // -------------------------
              // 方法二:通过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: 2525609975000
            },{
              id: 2,
              name: '水浒传',
              date: 2525609975000
            },{
              id: 3,
              name: '红楼梦',
              date: 2525609975000
            },{
              id: 4,
              name: '西游记',
              date: 2525609975000
            }]
            this.books =data;
            
            
            
    
          },
        });
      </script>
    </body>
    </html>
  • 相关阅读:
    Xcode 5.1 更新后插件不能用
    adplus 抓取dump
    压力测试工具 Tinyget
    mssql server提示无权限
    windbg sos加载相关
    oracle中文显示为问号
    菜鸟成长进阶之——fiddler使用总结
    windbg学习进阶之——windbg字段名及其意义
    windbg学习进阶之——dump分析常用命令收集
    windbg学习进阶之——windbg环境变量配置
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/13193406.html
Copyright © 2011-2022 走看看