基于vue和bootstrap的车辆查询案例

一.直接上代码

1.head中的代码

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="vue.js"></script>
    <style>
        .container {
            margin-top: 50px;
        }
    </style>

2.页面布局

<div class="container" id="app">
    <form class="form-inline">
        <div class="form-group">
            <label for="">id</label>
            <input type="text" class="form-control" v-model="id" @blur="checkid">
        </div>
        <div class="form-group">
            <label for="">名称</label>
            <input type="email" class="form-control" v-model="name">
        </div>
        <div class="form-group">
            <label for="">价格</label>
            <input type="email" class="form-control" v-model="price">
        </div>
        <button type="submit" class="btn btn-default" @click.prevent="add">添加</button>
    </form>
    <div class="form-group">
        <label for="exampleInputEmail2">根据 name 过滤：</label>
        <input type="text" class="form-control" @keyup.enter="search" v-model="searchTxt">
    </div>

    <table class="table table-striped" v-if="isall">
        <tr>
            <th>id</th>
            <th>品牌</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr v-for="car in cars">
            <td>{{car.id}}</td>
            <td>{{car.name}}</td>
            <td>{{car.price}}</td>
            <td><a href="#" @click="deleteCar(index)">删除</a></td>
        </tr>
    </table>
    <table class="table table-striped" v-if="issearch">
        <tr>
            <th>id</th>
            <th>品牌</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr v-for="(car,index) in searchCars">
            <td>{{car.id}}</td>
            <td>{{car.name}}</td>
            <td>{{car.price}}</td>
            <td><a href="#" @click="deleteCar(index)" >删除</a></td>
        </tr>
    </table>
</div>

3.JS代码

    let vm = new Vue({
        el: '#app',
        data: {
            id: "",
            name: "",
            price: "",
            cars: [
                {id: 1, name: '宝马', price: '40万'},
                {id: 2, name: '宝骏', price: '4万'},
                {id: 3, name: '奥迪', price: '50万'},
                {id: 4, name: '奥拓', price: '5万'},
                {id: 5, name: '丰田', price: '15万'},
                {id: 6, name: '玛萨拉蒂', price: '150万'},
                {id: 7, name: '保时捷', price: '200万'},
                {id: 8, name: '五菱宏光', price: '8万'}
            ],
            searchTxt:"",
            //
            isall:true,
            issearch: false,
            searchCars:[],
        },
        methods:{
            checkid: function() {
                for(let i = 0;i < this.car.length; i++){
                    if(this.id == this.cars[i].id){
                        alert('id不允许重复');
                        return
                    }
                }
            },
            add: function() {
                // console.log('添加按钮被点击了');
                if(this.id.trim() === "" || this.name.trim() === "" || this.price.trim() ===""){
                    alert('数据为空');
                    return
                }

                // 获取用户输入的数据,创建一个新的JS对象
                let newCar = {id:this.id,name:this.name,price:this.price}
                //更新 cars 数组
                this.cars.push(newCar);

                //清空输入框里的数据
                this.id = this.name = this.price = ''
        },
            search: function () {
                // 真实开发情况下，我们要把用户输入的搜索文本以Ajax的请求方式发送给服务器
                // 从服务器里获取到最新的数据，然后在页面上显示
            // 1.把所有数据隐藏，把搜索的结果显示
                this.issearch =true;
                this.isall =false;
            //2. 把上一次搜索的结果清空
            //     this.searchCars = [];

            // 3.把匹配到的结果放到searchCars里
                // let  searchCars = [];
                // for(let i = 0;i < this.cars.length;i++){
                //     if(this.cars[i].name.indexOf(this.searchTxt) !== -1){
                //         searchCars.push(this.cars[i]);
                //     }
                // }


                // console.log(this.searchTxt);
                // JS自带的filter方法，用来过滤满足条件的值:
                // this.searchCars = this.cars.filter(function (ele) {
                //     // console.log(this);  //此时this不指向vue对象
                //     //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
                //             //如果要检索的字符串值没有出现，则该方法返回 -1
                //     return ele.name.indexOf(vm.searchTxt) !== -1;
                // });

                // 匿名函数可以用 => 箭头函数替换
                // x => x * x相当于
                // function (x) {
                //     return x * x;
                // }

                this.searchCars = this.cars.filter(ele => ele.name.indexOf(vm.searchTxt)!==-1)
            },
            deleteCar:function (index) {
                // 使用splice方法来删除数据(删除的位置,删除的个数[,添加的元素])
                // 需要同时对两个数组进行删除
                this.searchCars.splice(index,1);
                this.cars.splice(index,1);
            },
        },
    });
</script>