品牌案例--增,删,查

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

qianxiling123

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

阅读量92

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/liutianxiao123/article/details/115215629

版权

学习笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

                        
                     
          <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content

                <form action="" method="POST" class="form-inline" role="form">

                    <div class="form-group">
                        <label class="" for="">ID</label>
                        <input v-model:value="carId" type="text" class="form-control" id=""
                            placeholder="Input field">
                    </div>
                    <div class="form-group">
                        <label class="" for="">NAME</label>
                        <input v-model:value="carName" type="text" class="form-control" id=""
                            placeholder="Input field">
                    </div>



                    <button type="submit" @click.prevent="add" class="btn btn-primary">添加</button>

                    <div class="form-group">
                        <label class="" for="">搜索</label>
                        <input v-model:value="keyword" type="text" class="form-control" id=""
                            placeholder="Input field">
                    </div>
                </form>

            </div>

            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>time</th>
                        <th>operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in search()" :key=index>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.time}}</td>
                        <td>

                            <button @click="deleteCar(item.id)" type="button" class="btn btn-info">删除</button>

                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            carList: [
                {
                    id: 1,
                    name: "宝马",
                    time: new Date()
                },
                {
                    id: 2,
                    name: "本吹",
                    time: new Date()
                },
                {
                    id: 3,
                    name: "五零",
                    time: new Date()
                },
            ],
            carId: "",
            carName: "",
            keyword: ""
        },
        methods: {
            add: function () {
                添加元素,先整理对象,push
                if (this.carId  && this.carName ) {
                    let obj = {
                        id: this.carId,
                        name: this.carName,
                        time: new Date
                    }
                    this.carList.push(obj),
                        this.carName = "",
                        this.carId = ""

                } else {
                    alert("不能为空")
                }
            },
            deleteCar: function (carId) {
                this.carList.splice(this.carList.findIndex(item => item.id == carId), 1)
            },
            search() {
                filter返回符合条件的数组
                includes方法判断一个数组是否包含指定值
                return this.carList.filter(item => item.name.includes(this.keyword))
            }
        },
    })
 
 