【vue/过滤器】解析富文本返回的 html 中，单独给指定标签加样式

包含使用 quill 解析富文本传过来的内容
方法1：使用全局过滤器：

<div style="width: 100%;" class="ql-snow ql-editor" v-html="safeHtmlContent"></div>

import Vue from 'vue'

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

Vue.filter('formatter', function (value) {
   
  // 只给 p 标签加首行缩进的样式
  return value.replace(/<p>/g, '<p style="text-indent: 20px;">');
});

// 和 data 平级的
computed: {
   
    safeHtmlContent() {
   
        // 在这里应用过滤器
        return this.$options.filters.formatter(this.articleInfo.articleContent);
    }
},

但是使用中有一个疑问，全局 Vue.filter可以用，但是 filters 却用不了，一直报错过滤器未定义，本来我以为是数据还没有获取到，查了一下， 原因出在 v-html 上，因为vue2.0 以上的版本，不可以给 v-html 使用 filters，只可以在 v-bind 和插值表达式中使用，如果非要使用可以用这个方法：

<div v-html="$options.filters.过滤器名(需要过滤的数据)"></div>

方法2

使用 filters 局部过滤器的写法，它和 data 平级：

<div style="width: 100%;" class="ql-snow ql-editor" v-html="$options.filters.safeHtmlContent(this.articleInfo.content)"></div>

filters:{
   
    safeHtmlContent(val){
   
        return val.replace(/<p>/g, '<p style="text-indent: 20px;">');
    }
},

方法2 的好处是：遇到一个页面有多种这样的情况也可以愉快的使用过滤器：

<div style="width: 100%;" class="ql-snow ql-editor" v-html="isList[4].articleContent"></div>

可见全局过滤器比较灵活；
我的理解是：要过滤的东西是使用的时候确定而不是在过滤器里确定，适合多次使用，这样也就弄懂了全局过滤器和局部过滤器的区别，以前是只知其然而不知其所以然。