欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue input输入框模糊查询的示例代码

程序员文章站 2022-11-20 13:06:12
vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回...

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输入框模糊查询的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。