基於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>