vue搜索和vue模糊搜索代码实例


Posted in Javascript onMay 07, 2019

1、使用vue来实现一般搜索

<form action="" @submit="submitQuery" class="all_two">
   <el-input v-model="input" placeholder="请输入内容" ref="search" style="width:300px;"></el-input>
</form>
<div class="all_three">
   <div v-for="item in this.$store.state.chufang.alldata">
      <div v-for="item1 in queryDate(item.cabinet)" >
         <input type="checkbox" name="checkbox" value="checkbox" style="zoom:200%;" :checked="item1.checks==0? true:false">
         <span>{{item1.name}}</span>
      </div>
    </div>
</div
submitQuery:function(){
  this.query = this.$refs.search.value.trim();
},
queryDate:function(list){
   if (this.query === '') {
     return list
   } 
   return list.filter((item)=>{
     if(item.name.indexOf(this.query) != -1){
      return item;
     }
   })
},

2、vue模糊搜索,原理都是一样的

<el-form :inline="true" :model="formInline" class="demo-form-inline mt15">
   <el-form-item>
     <el-input v-model="formInline.name" ref="search"  placeholder="姓名"></el-input>
   </el-form-item>
   <el-form-item>
      <el-input v-model="formInline.phone" ref="search1" placeholder="手机号"></el-input>
   </el-form-item>
   <el-form-item>
      <el-button type="primary" @click="onSubmit">筛选</el-button>
   </el-form-item>
 </el-form>
onSubmit() {
   this.query = this.$refs.search.value.trim();
   this.query1 = this.$refs.search1.value.trim();
},
queryDate:function(list){
   if (this.query === '' && this.query1 === '') {
     return list
   } 
   else if (this.query !== '' && this.query1 === '') {
     return list.filter(item => {
       if (item.name.indexOf(this.query) !== -1) {
         return item
        }
     })
    } 
    else if (this.query === '' && this.query1 !== '') {
     return list.filter(item => {
        if (item.mobile.indexOf(this.query1) !== -1) {
          return item
         }
      })
    } 
    else if (this.query !== '' && this.query1 !== '') {
      return list.filter(item => {
        if (item.name.indexOf(this.query) !== -1 && item.mobile.indexOf(this.query1) !== -1) {
          return item
        }
      })
    }
},

以上所述是小编给大家介绍的vue搜索和vue模糊搜索详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
详解Vue demo实现商品列表的展示
May 07 #Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 #Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 #Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 #Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 #Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 #Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 #Javascript
You might like
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
js实现简单的倒计时
2021/01/28 Javascript
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python3.5安装python3-tk详解
2019/04/26 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
Java基础知识面试要点
2016/07/29 面试题
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
经营理念标语
2014/06/21 职场文书
公司股份合作协议书
2014/12/07 职场文书
保安辞职信范文
2015/02/28 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
安全教育第一课观后感
2015/06/17 职场文书
Python如何将list中的string转换为int
2022/07/15 Ruby