javascript - 使用过滤器渲染 html

Question

我需要编写一个呈现 html 标签的过滤器。 这是我的过滤器:

filters: {
  limitStrLength: function (value, maxLength) {
    if (value && value.length > maxLength) {
      let partialVal = value.substr(0, maxLength) + "...";
      return "<span title='" + value + "' >" + partialVal + "</span>";
    } else {
      return value;
    }
  }
}

我的问题是我无法渲染原始 html。

如果我只是这样做:

<div>{{ productName  | limitStrLength(6) }}</div>

html 标签呈现为字符串(即，我在屏幕上看到类似 <span title=... 的内容)。

我还尝试使用 v-html属性:

<div v-html="productName | limitStrLength(6)"></div>

但是我收到一个错误:

Property or method "limitStrLength" is not defined on the instance but referenced during render.

有什么想法吗？

Answer 1

试试这个:

<div v-html="$options.filters.limitStrLength(productName, 6)"></div>

来源:Github issue