Web刷题记录——输入搜索联想

一、代码及解题思路

1、模板部分

<div id="app">
            <!-- TODO：请在下面实现需求 -->
            <span>搜索名字: </span>
            <!-- 1、绑定数据 -->
            <input placeholder="输入要搜索的名字" v-model="searchQuery" />
            <table>
                <thead>
                    <tr>
                        <!-- 2、处理首字母大写 -->
                        <td v-for="col in columns">{{col.slice(0,1).toUpperCase()+col.slice(1)}}</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- 3、改下渲染数组来源【计算属性list】 -->
                    <tr v-for="entry in list">
                        <td v-for="col in columns">{{entry[col]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

2、计算属性部分

// 4、计算属性【computed】中的值可以当作变量来用 并可以在模板中使用
// 且会跟随【searchQuery】变化而变化
computed: {
   list() {
     // 直接return 
     return this.data.filter((item) => {
         // 用filter筛选出 包含搜索字段的item
            return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
          )
     }
},

二、涉及到的知识点

1、计算属性

（1）定义

在Vue中，计算属性是一个函数，它会根据依赖的数据动态计算出一个新的值。计算属性的定义方式是在Vue组件的computed选项中创建一个函数。

 （2）使用

在Vue模板中，我们可以直接读取计算属性的值，就像读取普通的属性一样。

（3）场景

计算属性可以用于对数据进行过滤和排序 （如上真题）

2、数组API

（1）slice【切片/分隔】

//切取从a-b的数组元素【左闭右开】
slice(a,b)    

// 实现首字母大写
col.slice(0,1).toUpperCase()+col.slice(1)

（2）toLowerCase（） 与 toUpperCase（）【首字母大小写】

！！！加括号  加括号

// 小写
console.log("ALPHABET".toLowerCase()); // 'alphabet'

// 大写
console.log("alphabet".toUpperCase()); // 'ALPHABET'

（3）查找方法

includes()    // 是否包含，返回布尔值

indexOf()    // 找到就返回下标，否则返回-1

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

（4）filter【过滤方法】

【说明】返回满足特定条件的数组元素，并形成数组

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]