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>