前端-vue基础51-综合案例图书管理10

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid .total {
        height: 30px;
        line-height: 30px;
        background-color: palegoldenrod;
    }
</style>
 
<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>s
                <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>{{date|format('yyyy-MM-dd')}}</td>
                        <td><a href="" @click.prevent='toEdit(item.id)'>修改</a>
                            <span>|</span>
                            <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
                        </td>
                    </tr>
                    <!--  <tr>
                        <td>1</td>
                        <td>javascript</td>
                        <td>2018-01-01</td>
                        <td>删除</td>
                    </tr> -->
                    <!--  <tr>
                        <td>1</td>
                        <td>javascript</td>
                        <td>2018-01-01</td>
                        <td>删除</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>javascript</td>
                        <td>2018-01-01</td>
                        <td>删除</td>
                    </tr> -->
                </tbody>
            </table>
 
        </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script>
        Vue.directive('focus', {
            inserted: function(el) {
                el.focus();
            }
        });
        Vue.filter('format', function(value, arg) {
            //console.log(arg);
            if (arg == 'yyyy-MM-dd') {
                var ret = '';
                ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
                return ret;
            }
            return value;
        })
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                id: '',
                name: '',
                date: new Date(),
                submitFlag: false,
                books: []
                    /* books: [{
                        id: 1,
                        name: '三国演义',
                    }, {
                        id: 2,
                        name: '水浒传',
                        date: ''
                    }, {
                        id: 3,
                        name: '红楼梦',
                        date: ''
                    }, {
                        id: 4,
                        name: '西游记',
                        date: ''
                    }] */
            },
            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;
                        book.date = '';
                        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从数组中查找索引
                    /* 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: '三国演义',
 
                }, {
                    id: 2,
                    name: '水浒传',
                    date: ''
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: ''
                }, {
                    id: 4,
                    name: '西游记',
                    date: ''
                }];
                this.books = data;
            }
        })
    </script>
</body>
 
</html>

posted @ 2022-07-23 22:30 前端导师歌谣阅读(20) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端-vue基础50-综合案例图书管理9

· 前端-vue基础46-综合案例图书管理5添加图书

· 13_图书馆案例

· 前端学习（2099）：购物车案例-改变购买数量

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

前端-vue基础51-综合案例图书管理10

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<style>
	.grid .total {
	height: 30px;
	line-height: 30px;
	background-color: palegoldenrod;
	}
	</style>

	<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>s
	<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>{{date\|format('yyyy-MM-dd')}}</td>
	<td><a href="" @click.prevent='toEdit(item.id)'>修改</a>
	<span>\|</span>
	<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
	</td>
	</tr>
	<!-- <tr>
	<td>1</td>
	<td>javascript</td>
	<td>2018-01-01</td>
	<td>删除</td>
	</tr> -->
	<!-- <tr>
	<td>1</td>
	<td>javascript</td>
	<td>2018-01-01</td>
	<td>删除</td>
	</tr>
	<tr>
	<td>1</td>
	<td>javascript</td>
	<td>2018-01-01</td>
	<td>删除</td>
	</tr> -->
	</tbody>
	</table>

	</div>
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script>
	Vue.directive('focus', {
	inserted: function(el) {
	el.focus();
	}
	});
	Vue.filter('format', function(value, arg) {
	//console.log(arg);
	if (arg == 'yyyy-MM-dd') {
	var ret = '';
	ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
	return ret;
	}
	return value;
	})
	var vm = new Vue({
	el: '#app',
	data: {
	flag: false,
	id: '',
	name: '',
	date: new Date(),
	submitFlag: false,
	books: []
	/* books: [{
	id: 1,
	name: '三国演义',
	}, {
	id: 2,
	name: '水浒传',
	date: ''
	}, {
	id: 3,
	name: '红楼梦',
	date: ''
	}, {
	id: 4,
	name: '西游记',
	date: ''
	}] */
	},
	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;
	book.date = '';
	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从数组中查找索引
	/* 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: '三国演义',

	}, {
	id: 2,
	name: '水浒传',
	date: ''
	}, {
	id: 3,
	name: '红楼梦',
	date: ''
	}, {
	id: 4,
	name: '西游记',
	date: ''
	}];
	this.books = data;
	}
	})
	</script>
	</body>

	</html>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

前端-vue基础51-综合案例图书管理10

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识