Vue简单图书管理系统

最新推荐文章于 2024-06-12 10:54:06 发布

prospect_

最新推荐文章于 2024-06-12 10:54:06 发布

阅读量1.1k

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_43713835/article/details/103261150

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
        }
        
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="book">
            <div>
                <label for="id">
              编号：
            </label>
                <input type="text" v-model='id' v-bind:disabled="flag">
                <label for="name">
              名称：
            </label>
                <input type="text" v-model='name'>
                <button @click='add'>提交</button>
            </div>
        </div>
        <table cellspacing="0">
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
            <tr v-bind:key="item.id" v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td><a href="" v-on:click.prevent="delete1(item.id)">删除</a><span>|</span><a href="" v-on:click.prevent="xg(item.id)">修改</a></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                flag: false,
                books: [{
                    id: 1,
                    name: "三国演义",
                    date: "10-1"
                }, {
                    id: 2,
                    name: "水浒传",
                    date: "10-1"
                }, {
                    id: 3,
                    name: "红楼梦",
                    date: "10-1"
                }]
            },
            methods: {
                add: function() {
                    if (this.flag) {
                        this.books.some(arr => {
                            console.log(this)
                            if (arr.id == this.id) {
                                arr.name = this.name;
                            }
                        });
                        this.flag = false;
                        this.id = "";
                        this.name = ""

                    } else {
                        var book = {};
                        book.id = this.id;
                        book.name = this.name;
                        book.date = "";
                        this.books.push(book);
                        this.id = "";
                        this.name = ""
                    }
                },
                xg: function(a) {
                    var book = this.books.filter(function(val) {
                        console.log(this.name);
                        return val.id == a;
                    })
                    console.log(book);
                    this.id = book[0].id;
                    this.name = book[0].name;
                    this.flag = true;
                },
                delete1: function(id) {
                    this.books = this.books.filter(function(item) {
                        return item.id != id;
                    });

                },
                deleteBook: function(id) {
                    this.books = this.books.filter(function(item) {
                        return item.id != id;
                    });
                }

            }
        })
    </script>
</body>

</html>

prospect_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue简单图书管理系统

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫