vue实现搜索功能

template 部分

<!-- 搜索页面 -->
<template>
<div>
<div class="goback">
<el-button type="danger" @click="goback">返回</el-button>
</div> <div>
<el-input v-model="search" placeholder="请输入内容"></el-input>
<el-button type="primary" @click="Search">搜索</el-button>
</div>
<!-- 搜索后的 -->
<div v-if="searchData.length>0">
<ul v-for="(item, index) in searchData" :key="index">
<li>
<span>{{item.contact_name}}</span>
<span>{{item.address}}</span>
<span>{{item.phone}}</span>
</li>
</ul>
</div>
<!-- 搜索前的 -->
<div v-else>
<ul v-for="(item, index) in list" :key="index">
<li>
<span>{{item.contact_name}}</span>
<span>{{item.address}}</span>
<span>{{item.phone}}</span>
</li>
</ul>
</div>
</div>
</template>

JS 部分

<script>
import { mapGetters } from "vuex";
import api from "../../api/axiosConfig.js";
export default {
data() {
return {
search: "",
// 原本展示数据
list: [],
// 搜索后的展示数据
searchData: []
};
}, components: {}, computed: {
...mapGetters(["getAddressList", "getLoginUser"])
}, created() {
// 获取的接口数据
this.getList();
}, mounted() {}, methods: {
goback() {
this.$router.go(-1);
}, // 获取接口中数据的方法
getList() {
let params = {
id: this.getLoginUser.id,
token_sc: this.getLoginUser.token_sc
};
api.AddressList(params).then(res => {
// list 就是原始数据
this.list = res.data;
});
}, Search() {
// search 是 v-model="search" 的 search
var search = this.search;
if (search) {
this.searchData = this.list.filter(function(product) {
// 每一项数据
// console.log(product)
return Object.keys(product).some(function(key) {
// 每一项数据的参数名
// console.log(key)
return (
String(product[key])
// toLowerCase() 方法用于把字符串转换为小写。
.toLowerCase()
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
.indexOf(search) > -1
);
});
});
}
}
}
};
</script>

看看效果

这是初始样式

看看输入内容,搜索之后的

但是,如果输入栏没了内容,下面啥也不显示里,那我来加工一下

vue实现搜索功能的更多相关文章

  1. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  2. vue自动完成搜索功能的数据请求处理

    在现在的互联网世界里,自动完成的搜索功能是一个很常见的功能.比如百度.搜狗.360搜索 ... 功能描述一下大概是这个样子的:有一个搜索框,用户在里面输入要查询的条件,系统会“智能”判断用户输完了,然 ...

  3. vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...

  4. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  5. 我的Vue之小功能统计

    摘要:项目中经常会要用到大大小小的功能,所以我在这里进行一个汇总,后面会持续添加至这篇博客,希望当你遇到这个功能时,我的博客能够对你有帮助,(上一篇博客说要在收假后写一篇博客做一个年终总结,想了半天不 ...

  6. 高德地图搜索功能以及清除搜索结果maker

    第一次写文章,写得不好各位看官见谅~ (pσ_σ)P首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和 ...

  7. Android搜索功能的案例,本地保存搜索历史记录......

    开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示:  本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...

  8. Yii 1开发日记 -- 搜索功能及Checkbox的实现

    用yii 1实现后台的搜索功能,效果如下图: 1.模型中: public function search() { $criteria = new CDbCriteria; //独立高级搜索 if(is ...

  9. iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

随机推荐

  1. HDU 4511 小明系列故事——女友的考验 ( Trie图 && DP )

    题意 :  给出编号从1 ~ n 的 n 个平面直角坐标系上的点,求从给出的第一个点出发到达最后一个点的最短路径,其中有两种限制,其一就是只能从编号小的点到达编号大的点,再者不能走接下来给出的 m 个 ...

  2. django model 操作总结

    使用场景 一对一:在某表中创建一行数据时,有一个单选的下拉框(下拉框中的内容被用过一次就消失了).//两个表的数据一一对应 例如:原有含10列数据的一张表保存相关信息,经过一段时间之后,10列无法满足 ...

  3. border、outline、boxshadow那些事

    border 边框是我们美化网页.增强样式最常用的手段之一.例如: <div class="text"></div> .text { width: 254p ...

  4. windows 下的定时任务 (原)

    linux 下的定时任务是crontab 以前都是linux的定时任务,这次在windows做了定时任务,简单记录一下(win8 跟 win10为例) windows 2008下的定时任务配置: 控制 ...

  5. 通过Hadoop jmx收集Namenode,Jobtracker相关信息

    经常会有一些Hadoop监控的需求,例如datanode节点掉线,Tasktracker blacklist的数量,以及Namenode,Jobtracker的内存GC信息等. 之前采用Hadoop ...

  6. 开源认证组件汇总 Kerberos和CAS

    一.Kerberos 1.Kerberos原理和工作机制 概述:Kerberos的工作围绕着票据展开,票据类似于人的驾驶证,驾驶证标识了人的信息,以及其可以驾驶的车辆等级. 1.1 客户机初始验证   ...

  7. Extending Widgets with the Widget Factory

    https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ 实例 https://github.com/tkvw/jQue ...

  8. javascript中for循环和标签元素赋值问题总结

    <!DOCTYPE html><html><body><p>点击下面的按钮,将代码块循环五次:</p><button onclick= ...

  9. Jmeter之用户参数和用户定义的变量

    在调试脚本的时候,可以使用前置处理器中的用户参数组件进行数据的提供,在该数据中可以使用固定值也可以使用变量值. 如果是固定不变的一些配置项,不需要多个值的时候,也可以使用用户已定义的变量组件. 一.界 ...

  10. 32 kill不掉的语句

    32 kill不掉的语句 在mysql中有两个kill命令:一个是kill query+线程id,表示终止这个线程正在执行的语句:一个是kill connection+线程id,缺省connectio ...