使用过滤器渲染 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>

但我收到一个错误：

属性或方法“limitStrLength”未在实例上定义，但在渲染期间引用。

任何想法？

Answer 1

尝试这个：<div v-html="$options.filters.limitStrLength(productName, 6)"></div>