图书管理Vue

一夕ξ

于 2022-09-08 17:08:09 发布

阅读量182

点赞数

分类专栏：前端学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45387575/article/details/126768303

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

借鉴：(50条消息) vue基础案例_z750467878的博客-CSDN博客_vue基础案例

<!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="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<body>
    <div id="app">
        <button @click="booksTpye='全部'">全部</button>
        <button @click="booksTpye='已借阅'">已借阅</button>
        <button @click="booksTpye='未借阅'">未借阅</button>
        <table>
            <thead>
                <tr>
                    <th>图书名称</th>
                    <th>图书作者</th>
                    <th>图书价格</th>
                    <th>图书出版社</th>
                    <th>图书状态</th>
                    <th>图书操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in fliterBooks" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.auther}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.press}}</td>
                    <td>
                        <span v-if="item.borrow==true" style="color: red">已借阅</span>
                        <span v-else>未借阅</span>
                    </td>
                    <td>
                        <button v-if="item.borrow==true" @click="item.borrow=!item.borrow">归还</button>
                        <button v-else @click="item.borrow=!item.borrow">借阅</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="/demo3_824/js文件/vue.js">
    </script>
    <script src="图书管理.js"></script>
</body>

</html>


const app = new Vue({
    el: '#app',
    data() {
        return {
            booksData: [
                { name: 'JS程序设计', auther: '小明', price: '99', press: '机械工业出版社', borrow: false },
                { name: 'JS权威指南', auther: '小红', price: '78', press: '人民邮电出版社', borrow: false },
                { name: 'ES6入门', auther: '小黄', price: '67', press: '电子工业出版社', borrow: true },
                { name: 'JS设计模式', auther: '小刚', price: '49  ', press: '机械工业出版社', borrow: false },
            ],
            booksTpye: '全部'
        }
    },
    computed: {
        fliterBooks() {
            switch (this.booksTpye) {
                case '已借阅':
                    return this.booksData.filter(item => item.borrow)
                case '未借阅':
                    return this.booksData.filter(item => !item.borrow)
                default:
                    return this.booksData
            }
        }
    }

})

computed计算属性的使用