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

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

html 复制代码
<div style="width: 100%;" class="ql-snow ql-editor" v-html="safeHtmlContent"></div>
js 复制代码
import Vue from 'vue'

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
js 复制代码
Vue.filter('formatter', function (value) {
  // 只给 p 标签加首行缩进的样式
  return value.replace(/<p>/g, '<p style="text-indent: 20px;">');
});
js 复制代码
// 和 data 平级的
computed: {
    safeHtmlContent() {
        // 在这里应用过滤器
        return this.$options.filters.formatter(this.articleInfo.articleContent);
    }
},

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

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

方法2

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

html 复制代码
<div style="width: 100%;" class="ql-snow ql-editor" v-html="$options.filters.safeHtmlContent(this.articleInfo.content)"></div>
js 复制代码
filters:{
    safeHtmlContent(val){
        return val.replace(/<p>/g, '<p style="text-indent: 20px;">');
    }
},

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

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

可见全局过滤器比较灵活;

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

相关推荐
麦麦大数据2 分钟前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法
2501_915909062 小时前
HTTPS 错误解析,常见 HTTPS 抓包失败、443 端口错误与 iOS 抓包调试全攻略
android·网络协议·ios·小程序·https·uni-app·iphone
BillKu5 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
DevilSeagull5 小时前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰5 小时前
html中css的四种定位方式
前端·css·html
Async Cipher6 小时前
CSS 权重(优先级规则)
前端·css
大怪v6 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
Liquad Li6 小时前
Angular 面试题及详细答案
前端·angular·angular.js
源码师傅6 小时前
uniapp开源多商户小程序商城平台源码 支持二次开发+永久免费升级
小程序·uni-app·多商户商城源码·uniapp开源商城源码·开源多商户小程序商城平台·商城小程序代码·多商户商城小程序源码
用户21411832636026 小时前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端