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实现的分页函数
Dec 22 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
JavaScript函数详解
Feb 27 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
js面向对象之实现淘宝放大镜
Jan 15 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
教你php如何实现验证码
2016/01/20 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
理解Python垃圾回收机制
2016/02/12 Python
python 性能提升的几种方法
2016/07/15 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python高并发和多线程有什么关系
2020/11/14 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
"引用"与指针的区别是什么
2016/09/07 面试题
体育教师个人的自我评价
2014/02/16 职场文书
房屋转让协议书范本
2014/04/11 职场文书
李敖北大演讲稿
2014/05/24 职场文书
英语教师求职信
2014/06/16 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
Python实现批量自动整理文件
2022/03/16 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL