vue input输入框模糊查询的示例代码


Posted in Javascript onMay 22, 2018

Vue 模糊查询功能

原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回 -1。

input输入框,模糊查询

<template>
 <div>
  <input type="text" placeholder="请输入..." v-model="searchVal">
  <ul>
   <li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li>
  </ul>
 </div>
</template>
<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   searchVal: "",
   items: [
    {
     name: "上海",
     value: "sh"
    },
    {
     name: "北京",
     value: "bj"
    },
    {
     name: "重庆",
     value: "cq"
    },
    {
     name: "嗨嗨嗨",
     value: "hhh"
    },
    {
     name: "海上",
     value: "hs"
    },
    {
     name: "京都",
     value: "jd"
    }
   ]
  };
 },
 methods: {},
 computed: {
  NewItems() {
   var _this = this;
   var NewItems = [];
   this.items.map(function(item) {
    if (item.name.search(_this.searchVal) != -1) {
     NewItems.push(item);
    }
   });
   return NewItems;
  }
 }
};
</script>

效果如下:

vue input输入框模糊查询的示例代码

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

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
JS实现图片切换效果
Nov 17 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
详解js类型判断
May 22 #Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 #Javascript
You might like
mysql总结之explain
2012/02/27 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
vue如何使用async、await实现同步请求
2019/12/09 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
一组SQL面试题
2016/02/15 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
结婚邀请函范文
2014/01/14 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
美术学专业求职信
2014/07/23 职场文书
邀请书模板
2015/02/02 职场文书
管理失职检讨书
2015/05/05 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
python实现批量移动文件
2021/04/05 Python
如何通过一篇文章了解Python中的生成器
2022/04/02 Python