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

使用过滤器渲染 html

Render html using filter

javascript

html

vue.js

vuejs2

vue-filter