vue中如何实现搜索结果中高亮搜索关键字？

Question

我现在需要实现一个vue中如何实现搜索结果中高亮搜索关键字的效果。

大概效果是我输入查询后，会根据我的输入内容去查询GitHub的用户信息，并展现在页面上，
需要返回的数据在页面中高亮。

---

在论坛上找到了这个回答在vue中, 怎么使用render函数实现关键字高亮?用render函数实现了高亮
但是现在的问题是 回答上写的案例是直接引入的vue.js 可以实现。代码如下:

  render: (h, params) => {

              return h('span', {

               

              }, params.row.email.replace("test", '<span style="background: #ffff00;">test</span>'));

            }

          }

而我的demo是基于vue-cli搭建的 在main.js中直接

render: h => h(App)

---

不是很懂这个render函数怎么用，以及这样写能不能实现我的效果。求大神帮忙看下。说一下思路，源码在这里戳我，烦请不吝赐教。

Answer 1

// vue-cli 构建// 假设你查询后的用户信息为 userInfo// 展示组件为 list.vue// list.vue<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <span v-html="html"></span>&nbsp; &nbsp; </div></template><script>&nbsp; &nbsp; export default {&nbsp; &nbsp; &nbsp; &nbsp; data: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userInfo: 'some info'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return `<span style="color: red">${this.userInfo}</span>`&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>render 函数其实一样的原理，.vue 文件中不要 template 选项，而是使用 render 函数// list.vue<script>&nbsp; &nbsp; export default {&nbsp; &nbsp; &nbsp; &nbsp; data: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;userInfo: 'some info'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; render: function(h) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return h('span', {style: {color: 'red'}}, this.userInfo)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>