vue基础知识--图书管理案例

最新推荐文章于 2024-04-18 13:22:40 发布
张哈哈zhh
最新推荐文章于 2024-04-18 13:22:40 发布
阅读量174
点赞数
文章标签： javascript vue.js
本文链接：https://blog.csdn.net/weixin_44383261/article/details/116858060
版权
vue基础知识实现图书管理的增删改查：

```javascript
    <style>
        .grid{
            width: 550px;
        }
        .book{
            background-color: orange;
            padding: 2px;
            border-top: 1px solid rgb(105, 90, 62);
            border-left: 1px solid rgb(105, 90, 62);
            border-right: 1px solid rgb(105, 90, 62);
        }
        table,table tr th, table tr td{
            border: 1px solid rgb(105, 90, 62);
            border-collapse: collapse;
        }
        table{
            width: 550px;
            font-weight: normal;
            text-align: center;
        }
        thead>tr:nth-child(1){
            background-color: orange;
            /* font-weight:bold; */
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                    <div>
                        <label for="id">
                            编号：
                        </label>
                        <input type="text" id="id" v-model='id' :disabled='flag'>
                        <label for="name">
                            名称：
                        </label>
                        <input type="text" id="name" v-model='name'>
                        <button @click='submit'>提交</button>
                    </div>
                </div>
            </div>
            <table>
                <thead>
               <tr>
                   <th>编号</th>
                   <th>名称</th>
                   <th>时间</th>
                   <th>操作</th>
               </tr>
               </thead>
               <tbody>
                   <tr :key='item.id' v-for='item in books'>
                       <td>{{item.id}}</td>
                       <td>{{item.name}}</td>
                       <td>{{item.date|format('yyyy-MM-dd')}}</td>
                       <td>
                           <a href="" @click.prevent='edit(item.id)'>修改</a>
                           <span>|</span>
                           <a href="" @click.prevent='mydelete(item.id)'>删除</a>
                       </td>
                   </tr>
               </tbody>
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                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()
                },
            ],
            id:'',
            name:'',
            date:new Date(),
            flag:false
            },
            filters:{
                format:function(value,arg){
                    var ret=''
                    if(arg=='yyyy-MM-dd'){
                        ret+=value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate()
                        return ret
                    }
                    return value
                }
            },
            methods:{
                submit:function(){
                    if(this.flag){
                        // 修改
                        this.books.some((item)=>{
                            if(item.id==this.id){
                                item.name=this.name
                                return true // 终止遍历
                            }
                        })
                        this.flag=false
                        this.name=''
                        this.id=''
                    }else{
                        // 添加
                        this.books.push({
                        id:this.id,
                        name:this.name,
                        date:this.date
                    })
                    }
                    
                },
                edit:function(id){
                    // 禁止修改id
                    this.flag=true
                    var book=this.books.filter(function(item){
                        return item.id==id
                    })
                    // console.log(book)
                    // 把获取到的信息提交到表单
                    this.id=book[0].id
                    this.name=book[0].name

                },
                mydelete:function(id){
                    // 方法一
                    // var book=this.books.filter(function(item){
                    //     return item.id==id
                    // })
                    // this.books.pop(book)
                    // 方法二
                    var book=this.books.filter(function(item){
                        return item.id!==id
                    })
                    this.books=book
                }
            }
        })
    </script>
   </body>
效果：
在这里插入图片描述