Vue适合新人玩家的小项目~~~闲暇之余就是玩儿

最新推荐文章于 2024-05-11 11:57:58 发布
最新推荐文章于 2024-05-11 11:57:58 发布
阅读量235 收藏 2
点赞数 2
文章标签： html5 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50077219/article/details/120127104
版权
这个示例展示了如何使用Vue.js创建一个简单的图书管理系统，包括添加、修改和删除图书的功能。用户可以输入图书的编号和名称，点击添加按钮来新增图书，或者选择已有的图书进行修改。此外，页面还显示了所有图书的列表，每条记录包含ID、名称和日期，并提供了修改和删除的操作链接。
摘要由CSDN通过智能技术生成

这个小项目可以进行图书的增加，修改以及删除，具体代码以及展示如下：

<!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>

效果图如下：

 

SAZA
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端】Vue项目和微信小程序生成二维码和条形码
共同学习，共同成长
06-26 1万+
大家好，我是码喽的自我修养！今天给大家分享Vue项目和微信小程序如何生成二维码和条形码，介绍了JsBarcode、wxbarcode等插件，并提供具体代码帮助大家深入理解，彻底掌握！
Vue3通透教程【十七】Vite构建TS版本Vue项目
热门推荐
官方推荐
07-10 4万+
本系列将带领大家学习Vue3+TS+vite构成的前端工程化内容，本篇文章重点带领大家搭建Vue3+Ts版本项目！
vue小项目
Lily68910的博客
03-16 1854
电商电商业务描述多端电商后台开发模式启动后台项目项目初始化步骤如下1.码云创建仓库2.本地创建项目3.使用git把项目推送到远程仓库4.配置Element-UI安装项目引入5.配置axios6 删除组件和视图7.代码格式校验登录1.登录逻辑２.创建新分支login3.修改根组件4.创建登录组件index.vue 模板样式和安装 less-loader因版本问题报错的解决方案：全局样式添加路由添加第三方字体添加表单验证使用axios请求登录接口异步改造登陆成功跳转 电商 业务描述 多端 客户使用的业务服务：P
适合初学者入手的vue项目
贝贝的博客
10-19 7687
项目介绍 写在前面 这里是项目地址，如果觉得对你有帮助的话就给我点个星星8 这是一个简单的vue项目，适合初学者练手。 在这里特别感谢coderwhy老师提供的接口，想要接口的小伙伴请添加老师微信coderwhy00 技术栈 html + css + js ES6 AJAX (项目里用的是封装过的axios) Vue + VueCli + Vuex + VueRouter （Vue全家桶） 效果图 能学到什么 锻炼刚学过的知识 组件化开发的思想，以及封装一些公共的组件 特别常用的组件可以把
适合初学者练手的vue小项目
写代码的渣渣苏
07-15 5564
适合初学者练手的vue小项目
vue如何实现瀑布流 详细~~~~~
m0_59522382的博客
03-13 5439
上期vue如何实现瀑布流没想到看得人还挺多.虽然没几个赞,但是呢上期vue瀑布流是我用手机编写的,到最后没心情写了,就直接草草结束,这期带个大家完整的vue实现瀑布流 1.首先就是了解一下,请求本地数据,和请求后端数据, 本地数据请求就不需要传递什么配置项,请求之后直接吧所有的数据都给请求过来 而请求后端数据就要传递一些配置项(不懂我说的配置项可以看下面这张图)懂得自然懂 在这里我要给大家说的是请求本地数据写瀑布流,本地数据写瀑布流你会了 你请求后端数据照样可以写瀑布流 1.请求数据 将请求的数据渲染
【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问
q1ngqingsky的博客
04-06 6474
1. projectA项目和projectB项目中均要保留index.html、main.ts/js 、App.vue 这三个文件可以直接复制粘贴src下的index.html、main.ts/js 、App.vue文件内容，需要注意的是main.ts路径引入的变化,以及路由的路径引入正确与否。公司有两个项目，UI界面以及框架是一致的，且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目：projectA和projectB项目，公共部分提取出来。3. 配置package.json。
Vue项目：学生管理系统
专注于Java领域开发 关注我 带你玩转Java
02-28 2万+
Vue项目：学生管理系统 增删改查一套 免费获取
VUE小型项目
02-08
我的项目 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue小项目——cnode社区
01-20
寒假开始，复习了Vue的基本指令后，决定从简单项目开始，真正用Vue做一些实际项目，作为练手，我先做了cnode社区的初级项目，主要用了cnode的api信息，然后进行内容展示。算是把Vue-cli和Vue-router复习着用了一下
vue小项目-任务列表
06-20
利用js技术、vue.js、bootstrap编写的任务清单 分为未完成清单和已完成清单。可以添加任务清单也可以删除。任务存储在localStorage中
一个VUE项目
11-14
方便别人下载。这个是一个VUE小项目。 顺便看一看学一学
VUE入门小项目总结
08-20
利用网易云课堂http://study.163.com/course/courseMain.htm?courseId=1004463009  的源代码，一个简单的项目，来记录总结学习VUE的使用博客见https://blog.csdn.net/qq_16546829/article/details/81867611
Vue小项目
最新发布
2301_76905836的博客
05-11 844
使用Vue中的一些简单部分完成一个小项目的制作。
适合初学者入手的vue项目(2)
贝贝的博客
08-27 1910
适合初学者入手的vue项目(2) ​ 鉴于我之前一篇博客适合初学者入手的vue项目这个项目对现在来说有点太老了，那个项目现在其实不是很推荐大家去写了。 ​ 现在Vue3.2也出来了，Vite+Vue3+TS一定是未来的趋势。所以说学习是不能停止的，今天给大家推荐的项目在B站搜索Vue.js 移动端项目实战（今日头条）这个就好，当然你也可以点我这个链接打开。这个项目是Vue2.6那个版本的，资料很全，接口地址完整(有的接口会有些问题，不用钻牛角尖)。不是说Vue3出来了就不用学Vue2了， Vue3也只是加了
axios使用
wqww_1的博客
03-12 322
#安装 npm install axios --save <template> <div> <div> 第 <input type="text" v-model="page.currentPage" style="width:30px" @change="changePage"/> 页/{{page.pagesNum}}页，每页{{page.pageSize}}条,总共{{page.total}}条数据 &lt
适合初学者学习的vue
jomexiaotao的博客
06-01 1561
的node.js环境（NPM包管理器）vue-cli脚手架构建工具cnpm npm的淘宝镜像1，安装的node.js安装没什么可说的网上下载安装就可以了node -v查看是否安装成功 npm包管理器，是集成在节点中的，输入npm -v显示出npm的版本信息。 2，安装VUE-CLI脚手架构建工具 使用命令npm install -g vue-cli然后等待安装完成使用mac的同学可能报权限错误这个...
Vue与小程序项目Iconfont应用详解
在Vue和微信小程序项目中应用iconfont图标库是一个常见的需求，它能够为开发人员提供丰富的图形元素，提升项目的可读性和用户体验。以下是关于在Vue和小程序中集成iconfont的详细步骤： **Vue项目中使用iconfont**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值