当前位置 > it书童 > 大前端 > 正文

vue案例:图书管理系统

大前端 it书童 2020-02-11 14:19:23 0赞 0踩 237阅读 0评论
文末有完整源码下载

列表页展示数据

vue 中定义数据

new Vue({
    el: '#app',
    data: {
        books: [
            {
                'id': 1,
                'name': '天龙八部',
                'date': '',
            },
            {
                'id': 2,
                'name': '射雕英雄传',
                'date': '',
            },
            {
                'id': 3,
                'name': '神雕侠侣',
                'date': '',
            },
            {
                'id': 4,
                'name': '倚天屠龙记',
                'date': '',
            },
        ]
    }
})

html 遍历数据

<tr :key="item.id" v-for="(item, index) in books">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td></td>
    <td>
        <a href="" @click.prevent>编辑</a>
        <span>|</span>
        <a href="" @click.prevent>删除</a>
    </td>
</tr>

添加数据

html 触发添加事件

<form class="form-inline mt-2 mb-2" action="">
    <label for="id" class="mr-1">编号</label>
    <input type="text" class="form-control form-control-sm mr-2" placeholder="编号" id="id" v-model="id">
    <label for="name" class="mr-1">名称</label>
    <input type="text" class="form-control form-control-sm mr-2" placeholder="名称" id="name" v-model="name">
    <button type="button" class="btn btn-success btn-sm" @click="handle">提交</button>
</form>

vue 实现添加操作,将 html 传递的数据追加到数组中

new Vue({
    el: '#app',
    data: {
        id: '',
        name: '',
        books: [
            // ...
        ]
    },
    methods: {
        handle: function() {
            // 添加图书
            var book = {};
            book.id = this.id;
            book.name = this.name;
            book.date = '';
            this.books.push(book);
            // 清空表单
            this.id = '';
            this.name = '';
        }
    }
})

修改数据

html 绑定修改事件

<a href="" @click.prevent="toEdit(item.id)">编辑</a>

修改数据时,不能修改 id 值,给 id 添加 disable 属性,触发修改事件时该属性为 true

<input type="text" class="form-control form-control-sm mr-2" placeholder="编号" id="id" v-model="id" :disabled="flag">

vue 实现修改操作

data: {
    id: '',
    name: '',
    // id 元素能否修改的初始值
    flag: false,
    // ...
}

将要修改的数据显示到表单中

toEdit: function(id) {
    // 禁止修改 id
    this.flag = true;
    // 根据 id 获取数据
    var book = this.books.filter(function(item) {
        return item.id === id
    });
    this.id = book[0].id;
    this.name = book[0].name;
}

由于添加与修改是同个提交按钮,需要根据 flag 值判断是哪种操作

handle: function() {
    if (this.flag) {
        // 编辑图书
        this.books.some((item) => {
            if (item.id === this.id) {
                item.name = this.name;
                // 终止循环
                return true;
            }
        })
        this.flag = false;
    } else {
        // 添加图书
        var book = {};
        book.id = this.id;
        book.name = this.name;
        book.date = '';
        this.books.push(book);
    }
    // 清空表单
    this.id = '';
    this.name = '';
},

删除数据

html 绑定删除事件

<a href="" @click.prevent="deleteBook(item.id)">删除</a>

vue 实现删除操作

deleteBook: function(id) {
    // 用 filter 进行过滤
    this.books = this.books.filter(function (item) {
        return item.id != id;
    })
}
转载须注明出处:https://www.itshutong.com/articles/432/vue-case-book-management-system
标签: vue 案例
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录