vue.js（11）--案例--關鍵字搜索列表

關鍵字搜索品牌案例

（1）頁面布局

    <div class="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2>品牌管理</h2>
            </div>
            <div class="panel-body form-inline">
                <label for="">id：<input type="text" class="form-control" v-model="id"></label>
                <label for="">品牌名稱：<input type="text" class="form-control" v-model="name"></label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label for="">搜索關鍵字：<input type="text" class="form-control" v-model="keywords"></label>
            </div>
        </div>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>品牌名稱</th>
                    <th>添加時間</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <!-- 之前直接通過data中的數據直接渲染到頁面，
                        現在自定義一個方法search，通過函數傳參的形式把搜索到符合條件的數據渲染到頁面 -->
                    <td v-text="item.id"></td>
                    <td v-text="item.name"></td>
                    <td>{{ item.time | timeFormat}}</td>
                    <td><a href="" @click.prevent="del(item.id)">刪除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

（2）搜索邏輯的實現

<script>
var vm= new Vue({  //創建vue實例
            el:'.app',
            data:{
                arr:[
                    {'id':1,'name':'iPhone','time':new Date()},
                    {'id':2,'name':'華為','time':new Date()},
                    {'id':3,'name':'OPPO','time':new Date()}
                ], //創建一些初始數據與格式
                id:'',
                name:'',
                keywords:''  //初始化參數keywords為空
            },
            methods:{
　　　　　　　　　　search(keywords){
                    // var newList = []
                    // this.arr.forEach(item => {
                    //     if(item.name.indexOf(keywords) != -1) {//如果包含keywords，增加到數組中，渲染到頁面
                    //         newList.push(item)
                    //     }
                    // });
                    // return newList
                    return this.arr.filter(item=>{
                        if(item.name.indexOf(keywords)!= -1){
                            return item
                        }//filter方法來循環數組返回的是一個符合條件的新數組
                    })
                }
　　　　}
</script>

（3）小結與數組的新方法

定義一個search（keywords）方法，通過參數keywords綁定搜索框，接收關鍵字，然后通過循環遍歷數組來判斷符合條件的列表項，作為返回值渲染到頁面中。

數組方法：some（（item，i）=>{條件{return ture}}） 當條件成立時終止循環，i為查找到的索引，可通過return ture終止循環

　　　　　forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。

　　　　　　　　注意: forEach() 對於空數組是不會執行回調函數的。

　　　　　filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

　　　　　　　　注意： filter() 不會對空數組進行檢測。

　　　　　　　　注意： filter() 不會改變原始數組。

　　　　　findIndex（（item）=>{條件函數}）查找符合條件的索引

　　　　　　　　findIndex() 方法返回傳入一個測試條件（函數）符合條件的數組第一個元素位置。

　　　　　　　　findIndex() 方法為數組中的每個元素都調用一次函數執行：

• • •       當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調用執行函數。
    •       如果沒有符合條件的元素返回 -1

　　　　　　　　注意: findIndex() 對於空數組，函數是不會執行的。

　　　　　　　　注意: findIndex() 並沒有改變數組的原始值。

< div class= "app" >

< div class= "panel panel-primary" >

< div class= "panel-heading" >

< h2 >品牌管理 </ h2 >

</ div >

< div class= "panel-body form-inline" >

< label for= "" >id： < input type= "text" class= "form-control" v-model= "id" ></ label >

< label for= "" >品牌名稱： < input type= "text" class= "form-control" v-model= "name" ></ label >

< input type= "button" value= "添加" class= "btn btn-primary" @click= "add" >

< label for= "" >搜索關鍵字： < input type= "text" class= "form-control" v-model= "keywords" ></ label >

</ div >

</ div >

< table class= "table table-bordered table-hover" >

< thead >

< tr >

< th >id </ th >

< th >品牌名稱 </ th >

< th >添加時間 </ th >

< th >操作 </ th >

</ tr >

</ thead >

< tbody >

< tr v-for= "item in search(keywords)" :key= "item.id" >

<!-- 之前直接通過data中的數據直接渲染到頁面，

現在自定義一個方法search，通過函數傳參的形式把搜索到符合條件的數據渲染到頁面 -->

< td v-text= "item.id" ></ td >

< td v-text= "item.name" ></ td >

< td >{{ item.time | timeFormat}} </ td >

< td >< a href= "" @click.prevent= "del(item.id)" >刪除 </ a ></ td >

</ tr >

</ tbody >

</ table >

</ div >