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>