vue 列表搜索高亮

<template>
    <div>
    <input v-model="keyword"/>
    <ul>
        <li v-for="(item, index) in data" :key="index" v-html="textHighlighting(item.text, keyword)"></li>
    </ul>
</div>
</template>
<script>
    export default {
        data(){
            return {
                keyword: '',
                data: [
                    {id: 1, text: '文本高亮'},
                    {id: 2, text: 'vue文本高亮'},
                    {id: 3, text: 'react文本高亮'},
                    {id: 4, text: '前端文本高亮'},
                    {id: 5, text: 'css文本高亮'},
                    {id: 6, text: '全部文本高亮'}
                ]
            }
        },
        methods: {
            textHighlighting(itemText, searchText){
                const searchTextArr = searchText.split('')
                const itemTextArr = itemText.split('')
                const result = itemTextArr.map(item => {
                    return searchTextArr.includes(item) ? `<span style="color:red;">${item}</span>` : item
                })
                return result.join('')
            }
        }
    }
</script>