vue图书管理系统

最新推荐文章于 2025-06-17 15:00:52 发布

WSZFSNFK

最新推荐文章于 2025-06-17 15:00:52 发布

阅读量914

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/WSZFSNFK/article/details/122458553

本文展示了如何使用Vue.js创建一个图书管理系统。通过弹性盒子布局设计页面，利用v-for指令动态渲染图书信息，借助v-model双向数据绑定实现添加图书功能，并通过传入index删除图书数据，实现了基本的图书管理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码
布局使用弹性盒子布局
页面数据通过v-for循环到页面上
添加图书功能通过v-model绑定数据，然后使用push添加到data数据中
删除图书功能使用函数传入index，通过index删除对应的图书链表的数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .title ul {
   
   
        display: flex;
    }

    .title ul li {
   
   
        list-style: none;
    }

    .title ul li:nth-child(1) {
   
   
        flex: 1;
    }

    .title ul li:nth-child(2) {
   
   
        flex: 1;
    }

    .title ul li:nth-child(3) {
   
   
        flex: 1;
    }

    .title ul li:nth-child(4) {
   
   
        flex: 3;
    }