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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 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
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
利用python获得时间的实例说明
2013/03/25 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python实现感知器
2017/12/19 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
移动通信专业自荐信范文
2013/11/12 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
腾讯广告词
2014/03/19 职场文书
创业女性典型材料
2014/05/02 职场文书
班级出游活动计划书
2014/08/15 职场文书
社会实践的活动方案
2014/08/22 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
办公用品管理制度
2015/08/04 职场文书
Python Pandas 删除列操作
2022/03/16 Python