vue2 前端搜索实现
项目数据少的时候,搜索这样的小事情就要交给咱们前端来做了,重要声明,适用于小项目!!!!!
其实原理很简单,小demo是做搜索市区名称或者按照排名搜索。
<div>
<input type="text" v-model="name" placeholder="点击搜索按钮筛选" />
<input type="button" @click="search" />
</div>
<table>
<tbody>
<tr v-for="item in listt0">
<td>
<a v-text="item.sort"></a>
</td>
<td>
<a v-text="item.City"></a>
</td>
<td>
<a :style="{'color':item.sort<=10?'#f2972e':''}" v-cloak>{{item.Data | two}}</a>
</td>
<td><span v-text="item.Good"></span></td>
</tr>
</tbody>
</table>
页面布局成功之后,就是要做js配置了,首先是data初始化。
data:{
list0:[],//原始
listt0:[],//处理过的
name:'',//搜索框内容
},
接下来获取后台数据,后台数据必须是一次性传递给前端,原因你懂的。
created:function(){
//这获取数据且list0以及listt0都为获取到的数据
},
搜索的实现,判断如果是数字就按照sort搜索,不是数字则按照city搜索。一个简单的搜索就完成了。
methods:{
search:function(){//搜索
var _this=this;
var tab=this['list0'];
if(this.name){
_this['listt0']=[];
if(!isNaN(parseInt(_this.name))) {
for(i in tab) {
if(tab[i].sort == parseInt(_this.name)) {
_this['listt0'].push(tab[i]);
};
};
} else {
for(i in tab) {
if(tab[i].City.indexOf(_this.name) >= 0) {
_this['listt0'].push(tab[i]);
};
};
};
}else{
alert('请输入筛选条件!')
};
}
},
小知识点:
1. :style="{'color':item.sort<=10?'#f2972e':''}" :style设置前10名的文字颜色。
2. !isNaN(parseInt(_this.name)) 判断输入的是数字还是文字,如果有数字就会按照数字搜索。
3.过滤器two
filters: {//保留两位小数点
two : function(value){
if (!value) { return ''};
return value.toFixed(2);
}
}
vue2 前端搜索实现的更多相关文章
- js实现table中前端搜索(模糊查询)
项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...
- bootstrap table 前端搜索
1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js bootstrap-table-mytoolbar. ...
- jQuery实现简单前端搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue+element的表格分页和前端搜索
1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...
- 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)
话说某年某月某日,后台系统需要重构,当时公司还没有专业前端,由我负责前台页面框架搭建,做过后台系统的都知道,传统的管理系统大部分都是列表界面和编辑界面.列表界面又由表格和搜索框组成, 对于全部都是输入 ...
- html中layui+jfinal模板实现前端搜索功能
<input type="text" id="campus" class="layui-input" onkeyup="ck ...
- odoo开发笔记--前端搜索视图--按照时间条件筛选
odoo在日常使用中,常会有这样的需要,比如,某个列表按照 日 .周.月.年来过滤搜索. 效果: 那么如何实现呢,如下是一段不同写法的样例代码,提供参考. <!--某模型 搜索视图--> ...
- 前端 搜索样式 html
原文:https://blog.csdn.net/linlinxie/article/details/77484214?utm_source=blogkpcl4 测试1: <div class= ...
- vue2实现搜索结果中的搜索关键字高亮
// 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && k ...
随机推荐
- Servlet程序
编写: (1)搭建javaweb项目: 1,创建一个java项目:HelloServletWeb 2,在HelloServletWeb中创建一个文件夹webapp表示Web的根 3,在webapp中创 ...
- [JZOJ5511] 送你一个DAG
题目描述: 给出一个 \(n\) 个点 \(m\) 条边的 \(DAG\) 和参数 \(k\). 定义一条经过 \(l\) 条边的路径的权值为 \(l^k\). 对于 \(i = 1-n\), 求出所 ...
- 【CJOJ1167】【洛谷1894】[USACO4.2]完美的牛栏
题面 Description 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来 ...
- CodeIgniter怎么引入公共的头部或者尾部文件(实现随意引入或分区域创建header.html,bodyer.html,footer.html)
除非你天赋异禀,凡事基本对任何人来说都是开头难的,且开头的事情如果没有做好 往往会打掉一个人对于某件事的希望及其激情,所以咱们先从容易的事情开始慢慢建立自己 信心.后面的事情咱们再慢慢推进. 如果你是 ...
- ThreadLocal用例之周期为一次请求的变量
public class RecordedLocal { private static ThreadLocal<Recorded> local = new ThreadLocal<R ...
- Python中装饰器的用法
定义: 装饰器本身就是一个函数 为其他函数提供附加功能 不改变源代码 不改变原调用方式 装饰器=高阶函数+嵌套函数 知识点: 函数本身就是一个变量(意味着可以被复制给一个变量:test=test(1) ...
- Hello English Again
Currently, I just want to write something in English.Maybe I just want to review my Egnlish knowledg ...
- 9.C++-对象的构造函数(详解)
大家都定义struct或class时,不能给成员直接赋值,那么对象中成员变量的初始值是多少? 对于局部对象变量而言,其成员是个随机值,因为该变量是被分配在栈上,对于其它局部变量也是这样. 对于全局对象 ...
- IIS支持PHP文件解析
打开IIS程序映射 添加模块映射 请求路径为:*.php 模块为:FastCgiModule 可执行路径选择 php-cgi.exe 名称随意写
- APNS IOS 消息推送
一.Apns简介: Apns是苹果推送通知服务. 二.原理: APNs会对用户进行物理连接认证,和设备令牌认证(简言之就是苹果的服务器检查设备里的证书以确定其为苹果设备):然后,将服务器的信息接收并且 ...