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>
    <div>
        <span v-html="html"></span>
    </div>
</template>
<script>
    export default {
        data: function() {
            return {
                userInfo: 'some info'
            }
        },
        computed: {
            html: function() {
                return `<span style="color: red">${this.userInfo}</span>`
            }
        }
    }
</script>

render 函数其实一样的原理，.vue 文件中不要 template 选项，而是使用 render 函数

// list.vue
<script>
    export default {
        data: function() {
           return {
               userInfo: 'some info'
           }  
        },
        render: function(h) {
            return h('span', {style: {color: 'red'}}, this.userInfo)
        }
    }
</script>

Answer 2

建议查找结果使用 v-html，具体请参见官方文档关于 v-html 的说明

<p class="card-text" v-html="user.login.replace(searchName, `<span style=\"color: red;\">${searchName}</span>`)"></p>

如果希望把所有出现的 searchName 都高亮，还需要使用正则表达式。

Answer 3

我已经实现了 谢谢大家
https://qaqxiyangyang.github....

上面是我传到GitHub上的代码，也算一个小demo。