VUE练习图书列表

最新推荐文章于 2022-12-10 21:56:16 发布

cq_莫离

最新推荐文章于 2022-12-10 21:56:16 发布

阅读量2.3k

点赞数

分类专栏： VUE 文章标签： vue javascript js 列表

本文链接：https://blog.csdn.net/r455678/article/details/108210784

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录第一篇VUE代码练习，以后会越来越好

<!DOCTYPE html>
<html>

<head>
    <script src='vue.js'></script>
    <meta charset="UTF-8">
    <title>前端研习社-图书管理系统</title>
    <style>
        h1 {
            text-align: center;
        }

        table,
        td,
        th {
            border-collapse: collapse;
            border-spacing: 0
        }

        table {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #bcbcbc;
            padding: 5px 10px;
        }

        th {
            background: #42b983;
            font-size: 1.2rem;
            font-weight: 400;
            color: #fff;
            cursor: pointer;
        }

        tr:nth-of-type(odd) {
            background: #fff;
        }

        tr:nth-of-type(even) {
            background: #eee;
        }

        .add {
            width: 400px;
            padding: 10px 50px;
            margin: 10px auto;
            background: #ccc;
            border-radius: 5px;
        }

        h2 {
            text-align: center;
        }

        p {
            height: 50px;
            line-height: 50px;
        }

        input {
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            padding-left: 10px;
        }

        p button {
            float: right;
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>图书管理系统</h1>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>标签</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(book, index) in books" v-if='book.hidden'>
                    <td>{{index+1}}</td>
                    <td>{{book.bookname}}</td>
                    <td>{{book.auth}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.tag}}</td>
                    <td><button @click='del(index)'>删除</button></td>
                </tr>
            </tbody>
        </table>
        <div class="add">
            <h2>添加新书</h2>
            <div class="form-group">
                <p>书名：<input type="text" v-model="newBook.bookname"></p>
                <p>作者：<input type="text" v-model="newBook.auth"></p>
                <p>价格：<input type="text" v-model="newBook.price"></p>
                <p>标签：<input type="text" v-model="newBook.tag"></p>
                <p><button @click='add()'>添加</button></p>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                books: [{
                    bookname: '《三国演义》',
                    auth: '罗贯中',
                    price: 99.99,
                    tag: '经典',
                    hidden: true
                }, {
                    bookname: '《红楼梦》',
                    auth: '曹雪芹',
                    price: 88,
                    tag: '推荐',
                    hidden: true
                }, {
                    bookname: '《水浒传》',
                    auth: '施耐庵',
                    price: 77,
                    tag: '热销',
                    hidden: true
                }, {
                    bookname: '《西游记》',
                    auth: '吴承恩',
                    price: 60,
                    tag: '经典',
                    hidden: true
                }, ],
                newBook: {
                    bookname: '',
                    auth: '',
                    price: '',
                    tag: ''
                }
            },
            methods: {
                add: function () { //方法
                    this.books.push({
                        bookname: this.newBook.bookname,
                        auth: this.newBook.auth,
                        price: this.newBook.price,
                        tag: this.newBook.tag,
                        hidden: true
                    })
                },
                del: function (index) {
                    this.books[index].hidden = false
                }
            }
        })
    </script>

</html>