完成商品浏览和删除功能, 当无数据时给用户提示信息

最新推荐文章于 2024-02-29 21:19:02 发布

外套兜兜里有糖

最新推荐文章于 2024-02-29 21:19:02 发布

阅读量325

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Mr_ShengYang/article/details/128980489

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        table {
            width: 500px;
            height: 100px;
            text-align: center;
            font-size: 12px;
            border-collapse: collapse;
        }

        table thead {
            height: 30px;
            background-color: deepskyblue;
        }



    </style>
</head>
<body>
<div id="app">
        <table border="1" cellspacing="1" cellpadding="1" align="center">
            <thead>
            <tr>
                <td>编号</td>
                <td>品牌名称</td>
                <td>创立时间</td>
                <td>操作</td>
            </tr>
            </thead>


            <tr v-for="(value,index) in che">
                <td>{{value.id}}</td>
                <td>{{value.automobile}}</td>
                <td>{{value.time}}</td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>

            <tr v-if="che.length == 0">
                <td colspan="4">{{mesg}}</td>
            </tr>
        </table>
</div>
</body>

<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            che: [{
                id: 1,
                automobile: "奔驰",
                time: "2020-08-01",
                count: 0
            },
                {
                    id: 2,
                    automobile: "宝马",
                    time: "2020-08-02",
                    count: 0
                },

                {
                    id: 3,
                    automobile: "奥迪",
                    time: "2020-08-03",
                    count: 0
                },

            ],
            mesg:"没有数据喽"

        },
        methods:{
            del(index) {
                this.che.splice(index, 1);
            }

        }

    })

</script>
</html>