网页设计--第6次课后作业

试用Vue相关指令完成对以下json数据的显示。显示效果如下:

其中:gender=1 显示为女,gender=2显示为男。价格超过30元,显示“有点小贵”。价格少于等于30元,则显示“价格亲民”。

data: {
                books: [{
                        "id": "1",
                        "author": "小华",
                        "gender":1,
                        "name": "《春天来了》",
                        "price": "23",
                        "time": "1998-03-12"
                    },
                    {
                        "id": "2",
                        "author": "老舍",
                        "gender":2,
                        "name": "《济南的冬天》",
                        "price": "32",
                        "time": "1956-12-09"
                    },
                    {
                        "id": "3",
                        "author": "朱自清",
                        "gender":2,
                        "name": "《背影》",
                        "price": "40",
                        "time": "1943-09-12"
                    }

                ]
            }

你可能感兴趣的:(前端,javascript,vue.js)