lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <style>
        .navbar-brand {
            color: white;
        }

        .search-box {
            width: 400px;
        }

        .add-box {
            width: 600px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <nav class="navbar bg-primary mt-3" data-bs-theme="dark">
                <div class="container-fluid">
                    <span class="navbar-brand mb-0 h1">商品管理</span>
                </div>
            </nav>
            <div class="row search-box my-3">
                <div class="col-8">
                    <input type="text" class="form-control" placeholder="请输入商品名称" aria-label="First name">
                </div>
                <div class="col-4">
                    <button type="button" class="form-control btn btn-primary">搜索</button>
                </div>
            </div>
            <div class="input-group mb-3 add-box">
                <input type="text" class="form-control" placeholder="请输入商品名称" aria-label="Recipient's username"
                    aria-describedby="button-addon2">

                <input type="text" class="form-control" placeholder="请输入商品价格" aria-label="Recipient's username"
                    aria-describedby="button-addon2">

                <button class="btn btn-outline-secondary" type="button" id="button-addon2">添加</button>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">#</th>
                        <th scope="col">商品名称</th>
                        <th scope="col">商品价格</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in tableData">
                        <th scope="row">1</th>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <th>
                            <button type="button" class="btn btn-primary btn-sm">删除</button>
                        </th>
                    </tr>
                    <th scope="row" colspan="3">总价</th>
                    <td>0</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm">删除选中</button>
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let _data = [
            {
                id: 1001,
                name: "衣服",
                price: 100,
                isCheck: false
            },
            {
                id: 1002,
                name: "裤子",
                price: 200,
                isCheck: false
            },
            {
                id: 1003,
                name: "帽子",
                price: 50,
                isCheck: false
            },
            {
                id: 1004,
                name: "鞋",
                price: 300,
                isCheck: false
            }
        ]
        new Vue({
            el: '#app',
            data: {
                tableData:_data
            }
        })

    </script>
</body>

</html>