搜索模糊查询

2022-09-15 03:00:35 阅读：461 来源： 互联网

标签：const log 模糊查询搜索 console arrs id name

<template>
  <div>
    <input placeholder="搜索姓名" v-model="inputValue">
    <button @click="searchig"> 搜索 </button>
    <button @click="test">点击</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  components: {
  },

  setup() {
    interface RootObject {
      key: string;
    }
    const dataarr =ref()
    const inputValue = ref('');
    const arrs = [
      { id: '001', name: '马冬梅', age: 18, sex: '女' },
      { id: '002', name: '周冬雨', age: 19, sex: '女' },
      { id: '003', name: '周杰伦', age: 21, sex: '男' },
      { id: '004', name: '温兆伦', age: 22, sex: '男' }
    ]
    function searchig() {
     const arr = [];
      for (let i = 0; i < arrs.length; i++) {
        if (arrs[i].name.indexOf(inputValue.value) != -1) {
          arr.push(arrs[i]);
        }
      }
      dataarr.value =arr;//重新赋值
      console.log('====================================');
      console.log(dataarr.value);
      console.log('====================================');
    }
    function test() {
      // const a= {}
      // const b:RootObject = { key: 'b' }
      // const c:RootObject = { key: 'c' }
      // a[b] = 123
      // a[c] = 456
      // console.log(a[c]);
      const a: any = {}
      const b: string = 'abc'
      // const c:RootObject = { key: 'c' }
      a[b] = '456'
      console.log(a);

    }
    return { test, inputValue, searchig }
  }
})
</script>

<style lang="less">
span {
  color: red;
}
</style>

标签：const,log,模糊,查询,搜索,console,arrs,id,name
来源： https://www.cnblogs.com/zjxzhj/p/16695192.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

搜索模糊查询