Vue js文字高亮筛选器 [英] Vue js text highlight filter

问题描述

我需要使用vuejs编写文本高亮过滤器。这个想法是通过一个给定的单词循环，如果有匹配，应用一个类的跨度到该单词。我的问题是，我似乎无法返回数据与vuejs的HTML格式。任何想法将不胜感激。
$ b $ pre $ $ $ c $ V> //循环**单词**，如果在**查询中有匹配**
//应用带有某种样式的< span>
//在最后返回格式化的字符串到html正如杰夫刚才所说的那样，我们可以通过这样的方式来解决这个问题。 ，基本的胡须将数据解释为纯文本。

您可以通过用 String.replace（）方法。

下面是一个基本的例子： https://jsfiddle.net/0jew7LLz/

  Vue.filter（'highlight'，function（words，query）{
 return words.replace（query，'< span class = \'highlight\'>'+ query + '< / span>'）
}）; 
  

I need help writing a text highlight filter using vuejs. The idea is to loop through a given array of words and if there is a match, apply a span with a class to that word. The problem I have is that, I can't seem to return data with html formatting with vuejs. Any ideas will be highly appreciated. I am really stuck with this.

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
})

解决方案

As Jeff just said, the basic mustaches interprets the data as plain text.

You can add your span by replacing the query with the String.replace() method.

Here's a basic example: https://jsfiddle.net/0jew7LLz/

Vue.filter('highlight', function(words, query){
    return words.replace(query, '<span class=\'highlight\'>' + query + '</span>')
});

这篇关于Vue js文字高亮筛选器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！