您好，我上次发过去的测试题已经实现了所有功能。

在线预览
GitHub源码

实现效果如下:

主要思路：

   vue组件
   app.vue 应用的根组件
   Search.vue  头部实现搜索功能的组件 将搜索框内键入值保存在searchName通过props进行传递

   UserList.vue  展现用户信息的组件

1. suggest和分页功能选用iview ui组件库
   suggest 的实现在iview中需创建 标签，将suggest功能的提示信息的进行数据绑定
   :data="dataSearch"，suggest的待选内容保存在this.dataSearch数组中。
   此demo中定义了一个handleSearch方法去动态生成随机字母和数字模拟数据变化,并添加候选项。

代码如下

    handleSearch (value) {
        //定义一个生成随机字母或者数字的方法
        function randomString(len) {
          len = len || 32;
          var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
          var maxPos = $chars.length;
          var pwd = '';
          for (var i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
          }
          return pwd;
        }
        //定义suggest的待选内容
        this.dataSearch = !value ? [] : [
          value,
          value +randomString(1),
          value + randomString(2)
        ];

2 分页功能
实现分页功能需要调用iview api进行如下配置
代码如下

  <Page :total="pagecount" :page-size="pageSize" @on-change="pagechange" v-show="users" show-elevator></Page>
<script>
 data() {
    return {
      firstView: true,
      loading: false,
      pagecount: 10,//识别当前记录所在的页码
      pageSize: 6,//每页条数
      users: null,
      error: null,
    }
  },
watch: {
    searchName: function(value) {
      if (!value) {
        return
      }
      this.firstView = false
      this.loading = true
      // 发送ajax请求, 更新界面
      const url = `https://api.github.com/search/users?q=${value}`
      axios.get(url).then((response) => {
        this.loading = false
        //切割数据  处理分页逻辑
        items = response.data.items
        this.pagecount = items.length
        if (items.length < this.pageSize) {
          this.users = items;
        } else {
          this.users = items.slice(0, this.pageSize);
        }
      }, (response) => {
        console.log(response)
        this.loading = false
        this.error = response.statusText
      })
    },
 methods: {
    //配置分页器
    pagechange(index) {
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.users = items.slice(_start, _end);
    }
</script>

3.搜索结果中高亮搜索关键词
代码如下

//ajxa请求到数据后，对返回数据进行处理 
for (var i = 0; i < items.length; i++) {
//遍历数据后用通过 indexOf方法 判断数据中是否包含searchName即输入框内容
          if (items[i].login.indexOf(this.searchName) == 0) {
//replace操作数组为匹配值添加内联样式
            items[i].login = items[i].login.replace(this.searchName, '<span style="background: #ffff00;">' + this.searchName + '</span>');
          }

注意： 在vue中使用v-for进行数据遍历时，会将 HTML 标签解析成字符串
需要使用 v-html 将内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

    <div class="row" v-show="users">
      <div class="card" v-for="user in users">
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style='width: 100px' />
        </a>
        <p class="card-text" v-html="user.login">{{user.login}}</p>
      </div>

完整代码如下

<template>
  <div>
    <h2 v-show="firstView">Enter name to search</h2>
 <!--loading-->
    <h2 v-show="loading">
      <Spin fix>
        <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
    </h2>
    <h2 v-show="error">{{error}}</h2>
    <div class="row" v-show="users">
      <div class="card" v-for="user in users">
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style='width: 100px' />
        </a>
        <p class="card-text" v-html="user.login">{{user.login}}</p>
      </div>
    </div>
    <!--分页器-->
    <div class="pull-right">
      <Page :total="pagecount" :page-size="pageSize" @on-change="pagechange" v-show="users" show-elevator></Page>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
//定义一个变量来接收返回的数据
let items = null
export default {
  props: {
    searchName: {
      type: String
    }
  },
  data() {
    return {
      firstView: true,
      loading: false,
      pagecount: 10,
      pageSize: 6,
      users: null,
      error: null,
    }
  },
  watch: {
    searchName: function(value) {
      if (!value) {
        return
      }
      this.firstView = false
      this.loading = true
      // 发送ajax请求, 更新界面
      console.log('发送请求', value)
      const url = `https://api.github.com/search/users?q=${value}`
      axios.get(url).then((response) => {
        console.log(response)
        this.loading = false
        //切割数据  处理分页逻辑
        items = response.data.items
        for (var i = 0; i < items.length; i++) {
          if (items[i].login.indexOf(this.searchName) == 0) {
            items[i].login = items[i].login.replace(this.searchName, '<span style="background: #ffff00;">' + this.searchName + '</span>');
          }
        }
        this.pagecount = items.length
        if (items.length < this.pageSize) {
          this.users = items;
        } else {
          this.users = items.slice(0, this.pageSize);
        }
      }, (response) => {
        console.log(response)
        this.loading = false
        this.error = response.statusText
      })
    },
  },
  methods: {
    //配置分页器
    pagechange(index) {
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.users = items.slice(_start, _end);
    }
  }
}
</script>