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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
js实现表格筛选功能
Jan 18 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
vue增删改查的简单操作
Jul 15 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
浅析java线程中断的办法
Jul 29 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
十天学会php之第二天
2006/10/09 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
javascript 三种编解码方式
2010/02/01 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python中字符串的修改及传参详解
2016/11/30 Python
python绘制立方体的方法
2018/07/02 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
详解Python 循环嵌套
2020/07/09 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Python编写万花尺图案实例
2021/01/03 Python
医护人员英文求职信范文
2013/11/26 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
法人代表任命书范本
2014/06/05 职场文书
励志演讲稿500字
2014/08/21 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL