web蓝桥杯真题：输入搜索联想

代码及注释：

<!-- TODO：请在下面实现需求 -->
<span>搜索名字: </span>
<input placeholder="输入要搜索的名字" v-model="searchQuery"/>    //绑定值
<table>
  <thead>
    <tr>        //分割首字母，变为大写字母，再将分割除首字母的单词拼接
      <td v-for="col in columns">{{col.slice(0,1).toUpperCase() + col.slice(1)}}</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="entry in newData">
      <td v-for="col in columns">{{entry[col]}}</td>
    </tr>
  </tbody>
</table>

computed: {
  newData() {
    return this.data.filter(item => {    //筛选包含关键字的数组
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })            //注意：将数组中的字母和关键字都统一，要么转为大写，要么小写
  }
}

知识点：

1.大小写转换

str.toUpperCase()  //转大写
str.toLowerCase()  //转小写

2.过滤器

let newArr = array.filter((item,index,arr) => { ...})        //数组过滤器，符合条件直接return，返回一个新数组

3.一些元素查找方法

includes()是否包含，返回布尔值，indexOf()找到就返回下标，否则返回-1

find()返回符合条件的第一个元素，findIndex()返回符合条件的第一个元素下标

search()找到就返回下标，否则返回-1，参数可以是正则表达式

includes()、indexOf()    //可用于数组或字符串
find(fn())、findIndex(fn())     //用于数组
search()    //用于字符串