javascript - Vue js 文本高亮过滤器

Question

我需要使用 vuejs 编写文本高亮过滤器的帮助。这个想法是遍历给定的单词数组，如果有匹配项，则将带有类的 span 应用于该单词。我遇到的问题是，我似乎无法使用 vuejs 以 html 格式返回数据。任何想法都将受到高度赞赏。我真的被这个困住了。

Vue.filter('highlight', function(words, query){
    //loop through **words** and if there is a match in **query**
   //apply a <span> with some style
   //At the end return formatted string to html page
})

Answer 1

HTML 插值 {{{ foo }}} 已被移除以支持 vuejs2.X 中的 v-html 指令，因此从版本 2.x 开始，Vue.js 允许原始 JavaScript 模板(React 风格) 除了 HTML 模板。
@jeff 的答案是正确的，但对于 vuejs 1.x 版本，但如果 {{{}}} 对你们不起作用，或者如果您想评估 HTML 中的标签，并且来自受信任的来源，例如，如果你想添加一个<strong></strong>标记，那么你需要使用 v-html，v-html 要求 Vue 将字符串评估为 HTML:

<span v-html="$options.filters.highlight(item, val)">{{ item }}</span>

高亮过滤器:

Vue.filter('highlight', function(word, query){
  var check = new RegExp(query, "ig");
  return word.toString().replace(check, function(matchedText,a,b){
      return ('<strong>' + matchedText + '</strong>');
  });
});

或者你可以使用@Thomas Ferro 的过滤器