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下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
Vue.js动态组件解析
Sep 09 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
js canvas实现五子棋小游戏
Jan 22 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
无线电广播的开始
2002/01/30 无线电
php抓取页面的几种方法详解
2013/06/17 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
laravel model 两表联查示例
2019/10/24 PHP
关于js注册事件的常用方法
2013/04/03 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
关于numpy数组轴的使用详解
2019/12/05 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
pandas分组聚合详解
2020/04/10 Python
python3.7添加dlib模块的方法
2020/07/01 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
EJB与JAVA BEAN的区别
2016/08/29 面试题
长安大学毕业生自我鉴定
2014/01/17 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
农业项目建议书
2014/08/25 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python