vue.js11--案例--关键字搜索列表

关键字搜索品牌案例

（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‘:‘华为‘,{‘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 >