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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
详解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
解析htaccess伪静态的规则
2013/06/18 PHP
php的一个简单加密解密代码
2014/01/14 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers