vue简易添加图书

最新推荐文章于 2023-01-10 12:40:38 发布

真的没有好分享的

最新推荐文章于 2023-01-10 12:40:38 发布

阅读量547

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/wangyuan_111/article/details/126869061

本文档将指导你如何利用Vue.js框架在前端实现图书添加功能。通过创建组件、处理用户输入和与API交互，你可以轻松地在你的应用中添加新的图书记录。

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

<!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>
    <script src="../vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <div id="app" class="container">
        <input type="text" class="form-control" placeholder="请输入图书名称" @keydown.13 ="enter" v-model="tu.sm">
        <table class="table table-bordered">
            <tr>
                <td>ID</td>
                <td>书名</td>
                <td>添加时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in tushu" :key="index">
                <td>{{(index + 1)}}</td>
                <td>{{item.sm}}</td>
                <td>{{item.tj}}</td>
                <td><button class="btn btn-danger" @click="del(index)">删除</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data:{
                tu:{
                    id:'',
                    sm:'',
                    tj:'2021/09/14',
                },
                tushu:[
                    {id:'1',sm:'三国演义',tj:'2021/09/14',},
                    {id:'2',sm:'百科全书',tj:'2021/09/14',},
                    {id:'3',sm:'乱七八糟',tj:'2021/09/14',},
                    
                ],
            },
            methods:{
                enter(){
                    if(this.tu.sm){
                        this.tushu.push(this.tu);
                        sessionStorage.setItem('tushu',JSON.stringify(this.tushu));
                        this.reset()
                    }else{
                        alert('数据不能为空')
                    }
                },
                reset(){
                    this.tu={
                    id:'',

                    sm:'',
                    tj:'2021/09/14',
                    }
                },
                del(index){
                    this.tushu.splice(index,1);
                }

            },
            //                                                              
        });
    </script>
</body>
</html>