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

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>

效果如下：