1、纯前端vue+bootstrap实现图书管理系统的添加、删除功能最终效果界面

2、添加效果

 3、删除效果

 

4、前端代码：图书管理系统.html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>图书管理系统</h2>
        </div>
        <div class="panel-body form-inline">
            <label for="">id:<input type="text" class="form-control" v-model="id"> </label>
            <label for="">图书名称:<input type="text" class="form-control" v-model="name"> </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
        </div>
    </div>
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>图书名称</th>
            <th>添加时间</th>
            <th>添加操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in arr" :key="item.id">
            <td v-text="item.id"></td>
            <td v-text="item.name"></td>
            <td v-text="item.time"></td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var vm=new Vue({
        el:'.app',
        data:{
            arr:[
                {'id':1,'name':'三国演义','time':new Date()},
                {'id':2,'name':'红楼梦','time':new Date()},
                {'id':3,'name':'西游记','time':new Date()},
                {'id':4,'name':'水浒传','time':new Date()}
            ],
            id:'',
            name:''
        },
        methods:{
            add(){
                this.arr.push({'id':this.id,'name':this.name,'time':new Date()});
                this.id=this.name='';
            },
            del(id){
                var index = this.arr.findIndex(item=>{
                    if(item.id==id){
                        return true;
                    }
                })
                this.arr.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

# vue.js # bootstrap
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue