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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
详解动画插件wow.js的使用方法
Sep 13 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
浅析vue中的nextTick
Dec 28 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
CentOS6.5设置Django开发环境
2016/10/13 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
车间班长岗位职责
2013/11/30 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
2015年组织委员工作总结
2015/04/23 职场文书