第六次课后作业

最新推荐文章于 2024-07-13 11:25:08 发布

胡旭明202205403115

最新推荐文章于 2024-07-13 11:25:08 发布

阅读量254

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/weixin_74529543/article/details/140027656

版权

1、参照所给的代码，完成诗人信息列表展示的页面，需要完成前端html页面和后端程序的编写。

2、自己设计一个数据库表，并进行信息展示。

<!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>Vue-第六次课后作业</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <table border="1" cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>作者</th>
            <th>书名</th>
            <th>价格</th>
            <th>出版日期</th>
            <th>评价</th>
        </tr>

        <tr align="center" v-for="book in books">
            <td>{{book.id}}</td>
            <td>{{book.author}}
                (<span v-if="book.gender == 1">女</span>
                <span v-if="book.gender == 2">男</span>)

            <td>{{book.name}}</td>
            <td>{{book.price}}</td>
            <td>{{book.time}}</td>
            <td>
                <span v-if="book.price>30">有点小贵</span>
                <span v-else-if="book.price<=30">价格亲民</span>
            </td>
        </tr>


    </table>
</div>

</body>
<script>
    new Vue({
        el: "#app",
        data:{
            books: [{
                "id": "1",
                "author": "屈原",
                "gender":2,
                "name": "《离骚》",
                "price": "30",
                "time": "战国末期"
            },
                {
                    "id": "2",
                    "author": "老舍",
                    "gender":2,
                    "name": "《济南的冬天》",
                    "price": "32",
                    "time": "1956年12月"
                },
                {
                    "id": "3",
                    "author": "莫言",
                    "gender":2,
                    "name": "《蛙》",
                    "price": "40",
                    "time": "21世纪初期"
                }

            ]
        }

    })

</script>
</html>