Vue适合新人玩家的小项目~~~闲暇之余就是玩儿
这个小项目可以进行图书的增加，修改以及删除，具体代码以及展示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#books {
width: 700px;
margin: 100px auto;
text-align: center;
background-color: rgb(192, 255, 195);
box-shadow: 10px 10px 10px silver;
}
#books .fi {
margin-top: 10px;
}
#books table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
#books table td {
border: 1px dashed rgb(197, 255, 192);
height: 35px;
line-height: 35px;
}
#books a {
text-decoration: none;
cursor: pointer;
}
#books a:hover {
color: orangered;
}
#books input[type='text'] {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<div id="books">
<h1>图书管理</h1>
<hr>
<div class="fi">
<span>编号：<input type="text" v-model="id" :disabled="operation"></span>
<span>名称：<input type="text" v-model="name"></span>
<button @click="addBook">添加</button>
</div>
<table>
<tr>
<th>ID</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.date |formate("yyyy-MM-dd")}}</td>
<td>
<a @click.prevent="updateBook(book)">修改</a>|
<a @click.prevent="deleteBook(book.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
<script>
Vue.filter('formate', (value, args) => {
if (args == "yyyy-MM-dd") {
var reg = "",
reg = value.getFullYear() + "-" + parseInt(value.getMonth() + 1) + "-" + value.getDate();
return reg;
}
return value;
})
const app = new Vue({
el: '#app',
data: {
id: '',
name: '',
operation: false,
updatedBook: {}, // 被修改的图书对象
books: [{
id: 1,
name: '斗罗大陆',
date: new Date()
}, {
id: 2,
name: '绝世唐门',
date: new Date()
}, {
id: 3,
name: '龙王传说',
date: new Date()
}, {
id: 4,
name: '终极斗罗',
date: new Date()
}]
},
methods: {
addBook() {
if (this.operation) {
// operation = true 修改操作
this.updatedBook.name = this.name
this.operation = false
this.updatedBook = {}
} else {
// operation = false 添加操作
this.books.push({
id: this.id,
name: this.name,
date: new Date()
})
}
this.id = ''
this.name = ''
},
updateBook(book) {
this.updatedBook = book
this.id = this.updatedBook.id
this.name = this.updatedBook.name
this.operation = true
},
deleteBook(id) {
this.books = this.books.filter(book => {
return book.id !== id
})
}
}
});
</script>
</body>
</html>
效果图如下：
Vue适合新人玩家的小项目~~~闲暇之余就是玩儿相关推荐
- Springboot+vue 增删改查的小项目
Springboot+vue 增删改查的小项目 文章目录 Springboot+vue 增删改查的小项目 前言 源码 1. 介绍 2.核心功能 3.软件架构 3.1 目录结构 4.项目流程 4.1导入 ...
- 适合普通人的冷门小项目：公众号文章批量采集下载导出整理
今天分享一个比较冷门的小项目(又一个闷声发财的小项目) 项目:公众号文章批量下载服务: 这个项目普通人就可以操作,只要稍微学习一下就可以了,我自己也研究了下,还是比较容易上手的哈!就是赚个信息差的小项 ...
- 基于SSM+vue的前后端分离小项目（用户后台管理系统的实现）
本篇博客将介绍现今主要流行的前后端分离方式构建管理系统的实现 项目搭建环境: windows系统 服务器:Tomcat 9.0 项目运行环境:JDK1.8 前端主要技术:HTML.CSS.VUE前端框 ...
- SpringBoot+mybatis+Vue实现前后端分离小项目
spring-boot-starter-parent 2.2.5.RELEASE org.springframework.boot spring-boot-starter org.mybatis.sp ...
- python秒表小项目_适合新手练习的几个python小项目
关于python练习的小项目,其实就是一些常用的模块的针对练习 一.找出电脑中遗忘的大文件 # !/usr/bin/env python # _*_ coding:utf-8 -*- import o ...
- python需要多大的硬盘_适合新手练习的几个python小项目
关于python练习的小项目,其实就是一些常用的模块的针对练习 一.找出电脑中遗忘的大文件 # !/usr/bin/env python # _*_ coding:utf-8 -*- import o ...
- 一个特别适合新手练习的Android小项目——每日一妹纸
原文链接 http://sparkyuan.me/ 转载请注明出处 介绍 当前版本V 1.2 刚开始学习Android的时候,主要就是学习了一些Activity的生命周期,各种View和Layout的 ...
- Python入门小项目-摇骰子小游戏
大家平时微信上没少玩骰子吧,骰子比大小是我们经常玩的一个小游戏也十分的简单,就是不同玩家骰子点数比较大小.我们大学宿舍的时候,就经常比大小决定谁下去拿外卖,那时候费非常想让自己是最大的数,现在看来,以 ...
- python爬虫小项目挣钱兼职高雅推荐日结_我用Python爬虫挣钱的那些事
在下写了10年Python,期间写了各种奇葩爬虫,挣各种奇葩的钱,写这篇文章总结下几种爬虫挣钱的方式. 1.最典型的就是找爬虫外包活儿. 这个真是体力活,最早是在国外各个freelancer网站上找适 ...
最新文章
- Python 写了一个网页版的「P图软件」，惊呆了！
- 2008秋-计算机软件基础-第四章习题参考答案 P131 ，习题6之一
- python 自动化框架打包_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
- css的content属性
- 论文目录用word怎么自动生成或插入？
- 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
- cmd下的一些小技巧
- 在Eigrp做不等值路由的负载均衡
- 会写helloworld，不等于入门
- 如何下载Discuz
- php 微信机器人_php7 版本的微信机器人来了！（这应该是最灵活的版本了）
- Unity_Demo | 中世纪风3D-RPG游戏
- 【路径规划】基于改进粒子群实现机器人栅格地图路径规划
- 如何在React.js文件中设置标签的背景图片
- bam获取序列_bam格式说明
- Python中的装饰器、迭代器、生成器、推导式、匿名函数和高阶函数
- OpenCV學習筆記（6）基於 VC+OpenCV+DirectShow 的多個攝像頭同步工作
- ptp协议服务器,ptp服务器 ieee1588 ieee 1588 1588对时
- 百度android sdk聚合,SDK接入 · 百度移动统计Android SDK使用手册
- 合并两个排序的链表——《剑指offer》