Vue实现图书管理小案例

最新推荐文章于 2022-11-13 21:20:34 发布

代码在路上

最新推荐文章于 2022-11-13 21:20:34 发布

阅读量564

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_52250741/article/details/110426365

版权

本文将介绍如何利用Vue.js框架来实现一个简单的图书管理应用。通过创建组件、使用Vuex进行状态管理和Vue Router进行页面路由，打造一个交互式的前端界面，实现图书的增删查改功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .grid{
    
            margin:auto;
            width:500px;
            text-align:center;
         }
         .grid table{
    
            width:100%;
            border-collapse:collapse;
         }
         .grid th,td{
    
            padding:10px;
            border:1px solid orange;
            height:35px;
            line-height:35px;
         }
         .grid th{
    
            background-color:orange;
         }
         .book{
    
            background-color:orange;
            border-bottom:1px solid #ccc;
            padding:5px;
         }
         input{
    
            width:150px;
            outline:none;
         }
         .grid .total{
    
            height:30px;
            line-height:30px;
            background-color:orange;
            border-bottom:1px solid #ccc;
         }
    </style>
</head>
<body>
<div id="app">
   <div class="grid">
      <div>
         <h1>图书管理</h1>
         <div class="book">
            <label for="id">编号：</label>
            <input type="text" id="id" v-model='id' :disabled='flag' v-focus>
            <label for=&#

最低0.47元/天解锁文章

代码在路上

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue实现图书管理小案例

<!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><body><div id="
复制链接

扫一扫