搜索模糊查询

<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>