【vue】vue2.0及后v-html中过滤器的使用

最新推荐文章于 2023-07-04 07:30:34 发布

原创最新推荐文章于 2023-07-04 07:30:34 发布 · 377 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue2.0 专栏收录该内容

26 篇文章

订阅专栏

在Vue2.x中，作者移除了在模板中直接使用管道符号（|）定义过滤器的功能。为实现类似功能，可以采用全局方法、计算属性或在组件的$options.filters中定义。全局方法示例：通过Vue.prototype扩展关键词高亮功能。计算属性示例：在模板中使用计算属性来处理数据。$options.filters示例：在组件内部定义filters对象，如关键词替换功能。

说明：vue1.x中是可以直接加“|”来使用过滤器，但是在vue2.x中作者移除了这种写法。

解决方法：

1：全局方法（推荐）： <div v-html="keywoeds(str1,key1)"></div>

Vue.prototype.keywords= function（str,key）{
      let regExp = new RegExp(key, "g");
      let newStr = "";
      newStr = str.replace(regExp, `<font color='red'>${key}</font>`);
      return newStr;
 }；

2：computed 属性：

<div>{{ keywords() }}</div>

3：$options.filters（推荐）：

 filters: {
    keywords: function (str, key) {
      let regExp = new RegExp(key, "g");
      console.log(regExp);
      let newStr = "";
      newStr = str.replace(regExp, `<font color='red'>${key}</font>`);
      return newStr;
    },
  },