vue实战案例3-图书管理的应用

最新推荐文章于 2024-05-23 21:11:54 发布

月小满

最新推荐文章于 2024-05-23 21:11:54 发布

阅读量287

点赞数

分类专栏： vue实战文章标签： vue

本文链接：https://blog.csdn.net/weixin_44110923/article/details/113607240

版权

vue实战专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<head>
    <style>
        h2{ text-align: center;}
        #mybooks{ width: 600px; margin: 0 auto; text-align: center;}
        #mybooks div{ padding: 12px 0; background-color: sandybrown;}
        #mybooks table{ width: 100%; border-right: 1px dashed sandybrown; border-bottom:1px dashed sandybrown;}
        #mybooks table th,#mybooks table td{ height: 30px; line-height: 30px; border-left: 1px dashed sandybrown; border-top:1px dashed sandybrown;}
        #mybooks table td{ text-align:center;}
    </style>
</head>
<body>
<h2>图书管理系统</h2>
<div id="mybooks">
    <div>
        <label for="id">编号：</label>
        <input type="text" v-model="addid" id="id" :disabled="flag" v-focus>
        <label for="name">名称：</label>
        <input type="text" v-model="addname" id="name">
        <input type="submit" value="提交" @click="addBook" :disabled='submitFlag'>
    </div>
    <table>
        <thead>
            <tr>
                <th>图书编号</th>
                <th>图书名称</th>
                <th>出版时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="book in books" :key='book.id'>
                <td>{{book.id}}</td>
                <td>{{book.name}}</td>
                <td>{{book.time | format('yyyy-MM-dd hh:mm:ss')}}</td>
                <td>
                    <a href="#" @click.prevent="toEdit(book.id)">修改</a>
                    <span>|</span>
                    <a href="#" @click.prevent="deletBook(book.id)">删除</a>
                </td>
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">图书总数：<span>{{total}}</span></td>
            </tr>
        </tfoot>
    </table>
</div>
<script src="js/vue.js"></script>
<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });
    //使用filter格式化时间
    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 app=new Vue({
        el:"#mybooks",
        data:{
            addid:'',
            addname:'',
            flag:false,
            submitFlag:false,
            books:[]
        },
        methods:{
            //删除本图书
            //根据id从数组中查找元素的索引
            deletBook:function(id){
                var index=this.books.findIndex(function(item){
                    return item.id== id;
                });
                this.books.splice(index,1);
            },
            addBook:function(){
                if(this.flag){
                    //编辑图书
                    //根据当前ID去更新数组中对应的数据
                    this.books.some((item) => {
                        if(item.id==this.addid){
                            item.name=this.addname;
                            //完成更新操作后，需要终止循环 这里用true
                            return true;
                        }
                    })
                }else{
                    //添加图书
                    var book={};
                    book.id=this.addid;
                    book.name=this.addname;
                    book.time='';
                    this.books.push(book);
                }
                this.flag=false;
                this.addid='';
                this.addname='';
            },
            //修改图书信息
            toEdit:function(id){ 
                this.flag=true;
                console.log(id);
                //根据ID查询出要编辑的数据
                var book=this.books.filter(function(item){
                   return item.id==id
                });
                console.log(book);
                //把获取到数据填充到表单
                this.addid=book[0].id;
                this.addname=book[0].name;
            }
        },
        computed:{
            total:function(){
                //计算图书总数
                return this.books.length;
            }
        },
        watch:{
            addname:function(val){
                //验证图书名称是否存在
                var flag=this.books.some(function(item){
                    return item.name== val
                })
                if(flag){
                    //说明图书名称存在
                    this.submitFlag=true;
                }else{
                    //图书名称不存在
                    this.submitFlag=false;
                }
            }
        },
        mounted:function(){
            //该生命周期钩子函数被触发时，模板已经可以使用
            //一般此时用于获取后台数据，然后把数据填充到模板
            //真实数据是通过ajax访问后台得到的数据，这里用来模拟
            var data=[{
                id:1,
                name:'西游记',
                time:1612333919000 //注意：这里的时间戳不能加引号
            },{
                id:2,
                name:'红楼梦',
                time:1612333919000
            },{
                id:3,
                name:'三国演义',
                time:1612333919000
            },{
                id:4,
                name:'水浒传',
                time:1612333919000
            }];
            this.books=data;
        }
    })

</script>
</body>

月小满

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue实战案例3-图书管理的应用

<head> <style> h2{ text-align: center;} #mybooks{ width: 600px; margin: 0 auto; text-align: center;} #mybooks div{ padding: 12px 0; background-color: sandybrown;} #mybooks table{ width: 100%; border-right: 1.
复制链接

扫一扫