01_20.商品數(shù)據(jù)添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            width: 800px;
            margin: 20px auto;
        }
        .operation {
            margin-bottom: 10px;
            text-align: center;
            line-height: 20px;
            font-size: 18px;
        }
        .operation input {
            padding: 5px;
            border: 1px solid deepskyblue;
        }
        .operation button {
            border-radius: 3px;
            background-color: deepskyblue;
        }
        .search {
            text-align: left;
            line-height: 20px;
            font-size: 18px;
        }
        .search input {
            padding: 5px;
            border: 1px solid deeppink;
        }
        #tb{
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }
        #tb th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        #tb td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="app" class="wrapper">
        <div class="operation">
            <input type="text" placeholder="請輸入編號(hào)" v-model="newGoods.id">
            <input type="text" placeholder="請輸入名稱" v-model="newGoods.name">
            <button type="button" v-on:click="addGoods">添加數(shù)據(jù)</button>
        </div>
        <!-- <div class="search">
            <input type="text" placeHolder="請輸入篩選內(nèi)容">
        </div> -->
        <table id="tb">
            <tr>
                <th>編號(hào)</th>
                <th>名稱</th>
                <th>創(chuàng)建時(shí)間</th>
                <th>操作</th>
            </tr>
            <!-- 沒有數(shù)據(jù)才顯示, 有數(shù)據(jù)隱藏 -->
            <tr v-if="goodsList.length == 0">
                <td colspan="4">列表無數(shù)據(jù)</td>
            </tr>
            <!-- 渲染商品列表 -->
            <tr v-for="item in goodsList">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.ctime }}</td>
                <td>無</td>
                <!--<td>
                    <a href="#">刪除</a>
                </td>-->
            </tr>
        </table>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // 商品列表
                goodsList: [
                    { id: 1, name: '法拉利', ctime: new Date() },
                    { id: 2, name: '瑪莎拉蒂', ctime: new Date() },
                    { id: 3, name: '蘭博基尼', ctime: new Date() }
                ],
                // 新商品數(shù)據(jù)
                newGoods: {
                    id: '',
                    name: ''
                }
            },
            methods: {
                // 點(diǎn)擊添加按鈕, 拿到兩個(gè)表單的值, 組成一個(gè)商品對(duì)象push到商品列表中, 視圖會(huì)自動(dòng)更新
                addGoods() {

                    // 添加商品
                    this.goodsList.push({
                        id: this.newGoods.id,
                        name: this.newGoods.name,
                        ctime: new Date()
                    });

                    // 清空表單數(shù)據(jù)
                    this.newGoods.id = '';
                    this.newGoods.name = '';
                }
            }
        });
    </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容