Question

是否有方便的方法来突出显示文本或元素中字符串的所有字符串出现次数？

类似于vue.js 1的过滤方法？

Answer 1

vuejs2中也有filters。您只需创建自己的方法来突出显示。

<div>{{ 'some-text' | highlight }}    

new Vue({
  // ...
  filters: {
    highlight: function (value) {
      // logic
    }
  }
})

Answer 2

我的解决方案的唯一问题是，整个v-html-text现在都是小写。我在methods-block中定义了高亮方法：

methods: {
    highlight(words, query) {
        if(query === '') { return words }
        if(typeof(words) === 'number') {
            words = '' + words + ''
        }
        // when removing the .toLowerCase() your search becomes case-sensitive
        return words.toLowerCase().replace(query, '<span style="background: yellow;">' + query + '</span>')
    }
}

在我的模板中，它看起来像这样：

<span v-html="highlight('This is some sort of test', 'some')"> // should now highlight 'some'

Vue.js 2：突出显示字符串

2 个答案: