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>