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 相关文章推荐
自写的一个jQuery圆角插件
Oct 26 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
怎么清空javascript数组
May 11 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
js显示文本框提示文字的方法
May 07 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
node实现基于token的身份验证
Apr 09 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
处理canvas绘制图片模糊问题
May 11 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
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python数学形态学实例分析
2019/09/06 Python
python滑块验证码的破解实现
2019/11/10 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
介绍一下UNIX启动过程
2013/11/14 面试题
中学生国旗下讲话稿
2014/04/26 职场文书
婚前保证书
2014/04/29 职场文书
宣传普通话标语
2014/06/27 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
Python经常使用的一些内置函数
2022/04/11 Python