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>





效果如下：





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