图书管理前段_图书前段页-CSDN博客

本文详细介绍了一个基于Vue.js的图书管理系统的设计与实现过程，包括HTML结构布局、CSS样式设置及JavaScript交互逻辑。展示了如何使用Vue.js进行数据绑定、条件渲染和事件处理，以及自定义过滤器对日期进行格式化。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

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

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

        .grid th {
            background-color: orange;
        }

        .grid div {
            margin: auto; /*居中*/
            width: 500px; /*宽度*/
            text-align: center;
            background-color: orange; /*背景色*/
        }
    </style>
</head>
<body>
<div id="app">
    <div class="grid">图书管理</div>
    <div class="grid">
        <div>
            编号: <input type="text" id="id" v-model="id" :disabled="flag"> 名称: <input type="text" id="name" v-model="name" >
            <button @click="tianjia()">添加</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(book,index) in books" :key="book.id">
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                <td>
                    <a href="" @click.prevent="edit(book.id)">编辑</a>
                    <a href="" @click.prevent='adelete(book.id)'>删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */
    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: {
            books:[{
                id: 1,
                name: '三国演义',
                date: 2525609975000
            },{
                id: 2,
                name: '水浒传',
                date: 2525609975000
            },{
                id: 3,
                name: '红楼梦',
                date: 2525609975000
            },{
                id: 4,
                name: '西游记',
                date: 2525609975000
            }],
            id: '',
            name: '',
            flag:false
        },
        methods: {

            tianjia: function () {
                if(this.flag){
                    for (var i=0; i<this.books.length;i++){
                        if(this.books[i].id==this.id){
                            this.books[i].name=this.name;
                        }
                    }
                    this.flag=false;
                }else{
                    // 添加图书
                    var book = {};
                    book.id = this.id;
                    book.name = this.name;
                    book.date = '';
                    this.books.push(book);
                    // 清空表单
                    this.id = '';
                    this.name = '';
                }
            },
            edit:function (id) {
                for (var i=1; i<=this.books.length; i++){
                    if(id==i){
                        this.id=this.books[i-1].id;
                        this.name=this.books[i-1].name;
                    }
                }
                this.flag=true;
            },
            adelete:function (id) {
                // var index = this.books.findIndex(function(item){
                //   return item.id == id;
                // });
                // this.books.splice(index, 1);

                var index;
                for (var i=0; i<this.books.length;i++){
                    if(this.books[i].id == id){
                        index=i;
                    }
                }
                this.books.splice(index,1);
            }
        }
    })

</script>
</body>
</html>