vue2 前端搜索实现示例


Posted in Javascript onFebruary 26, 2018

项目数据少的时候,搜索这样的小事情就要交给咱们前端来做了,重要声明,适用于小项目!!!!!

其实原理很简单,小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);
          }
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
webpack构建react多页面应用详解
Sep 15 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 #Javascript
vue的全局提示框组件实例代码
Feb 26 #Javascript
Angular4 ElementRef的应用
Feb 26 #Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 #Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 #Javascript
vue bus全局事件中心简单Demo详解
Feb 26 #Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 #Javascript
You might like
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php实现源代码加密的方法
2015/07/11 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
文员个人求职自荐信
2013/09/21 职场文书
煤矿安全承诺书
2014/05/22 职场文书
介绍信范文大全
2015/05/07 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
Mysql中mvcc各场景理解应用
2022/08/05 MySQL