Vue js 文本高亮过滤器

Question

我需要帮助使用 vuejs 编写文本突出显示过滤器。这个想法是遍历给定的单词数组，如果有匹配项，则将具有类的跨度应用于该单词。我遇到的问题是，我似乎无法使用 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
})

原文由 Makten 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML 插值 {{{ foo }}} 已被移除，取而代之的是 vuejs2.X 中的 v-html 指令，因此从 2.x 版开始，Vue.js 除了 HTML 模板之外还允许原始 JavaScript 模板（React 风格） .

@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 的过滤器

原文由 Kumar_14 发布，翻译遵循 CC BY-SA 3.0 许可协议