vue添加品牌搜索双向绑定 bootstrap-ui

最新推荐文章于 2024-06-25 08:13:54 发布

小龙学前端

最新推荐文章于 2024-06-25 08:13:54 发布

阅读量186

点赞数

分类专栏： html Vue

本文链接：https://blog.csdn.net/xushilong0812/article/details/108564687

版权

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

用到 bootstrap写页面

效果图

在这里插入图片描述

html 代码


```javascript
 <div id="add">
        <div class="container main">
            <div class="bg-primary title ">
                添加品牌
            </div>
            <form class="form-inline main-input">
                <div class="form-group">
                    <label>ID:</label>
                    <input type="text" class="form-control" id="exampleInputName2" v-model="uID" @focus="init">
                </div>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" class="form-control" id="exampleInputEmail2" v-model="uName">
                </div>
                <input type="button" class="btn btn-primary  btn-default" @click="add" value="添加">
                <br>
                <div class="form-group">
                    <label>搜索名称关键字：</label>
                    <input type="text" class="form-control" id="exampleInputEmail2" v-model="ss">
                </div>
            </form>
        </div>
        <div class="box container-fluid">
            <table class="table table-striped table-bordered ">
                <tr>
                    <th class="col-lg-1"><strong>ID</strong></th>
                    <td class="col-lg-2"><strong>Name</strong></td>
                    <td class="col-lg-6"><strong>Ctime</strong></td>
                    <td class="col-lg-3"><strong>Operation</strong></td>
                </tr>
                <tr v-for="item in  blur(ss)" :key="item.uID">
                    <td>{{item.uID}}</td>
                    <td>{{item.uName}}</td>
                    <td>{{item.time}}</td>
                    <td><a href="#" @click="Del(item.uID)">删除</a></td>
                </tr>

            </table>
        </div>
    </div>

css样式

        .main {
            width: 1000px;
            border: 1px #337ab7 solid;
            padding: 0px;
            border-radius: 4px 4px 4px 4px;
        }
        
        .title {
            padding: 10px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        
        .box {
            margin-top: 20px;
            width: 1000px;
            padding: 0px;
        }
        
        .main-input div {
            padding: 10px 10px;
        }

js代码

window.onload = function() {
    let vm = new Vue({
        //获取
        el: "#add",
        data: {
            uID: null,
            uName: null,
            time: null,
            ss: "",
            arr: [{
                uID: 1,
                uName: "宝马",
                time: new Date,
            }],
        },
        methods: {
            //添加事件
            add() {
                // 在arr 数组中最后添加
                this.arr.push({
                    uID: this.uID,
                    uName: this.uName,
                    time: this.time = new Date(),
                })

                // 完成添加时 输入框归空
                this.uID = ""
                this.uName = ""
            },
            // 删除事件
            Del(id) {

                //根据id获取  在数组中的下标
                let index = this.arr.findIndex((item) => {
                    if (id == item.uID) {
                        return true
                    }
                })

                //获取到下标进行删除  删除arr
                this.arr.splice(index, 1)
            },
            //输入框焦点 搜索框为空
            init() { this.ss = "" },
            // 搜索
            blur(ss) {
            
                return this.arr.filter((item) => {
                    // 返回新建数组
                    if (item.uName.includes(ss)) {
                        return item
                    }

                })

            },


        },

    })

}