图书管理Vue

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

    
    
    
    
    
    
    



    

        全部
        已借阅
        未借阅
        

            

                

                    
图书名称
                    
图书作者
                    
图书价格
                    
图书出版社
                    
图书状态
                    
图书操作
                
            
            

                

                    
{{item.name}}
                    
{{item.auther}}
                    
{{item.price}}
                    
{{item.press}}
                    

                        已借阅
                        未借阅
                    
                    

                        归还
                        借阅
                    
                
            
        
    
    
    

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计算属性的使用