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实现的分页函数
Feb 07 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
python实现稀疏矩阵示例代码
2017/06/09 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
美容师的职业规划书
2013/12/27 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
情人节活动总结范文
2015/02/05 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
党章学习心得体会2016
2016/01/14 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL