使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析

news/2024/11/29 8:54:10/

使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析

需求:是内容里如果含有含有www.baidu.com这种链接高亮显示
解决办法:
首先拿到需要回显的内容content对内容进行转义escapeHTML,之后再去判断是否是链接进行高亮添加
代码如下

onMounted(() => {content.value = escapeHTML(content.value);
});
//对内容里含有的标签进行转义
const escapeHTML = (value) => {const div = document.createElement("div");div.textContent = value;return div.innerHTML;
};

http://www.ppmy.cn/news/977980.html

相关文章

瑞吉外卖开发笔记 七(Linux)

为什么要学Linux ? 企业用人要求个人发展要求 学习后能干什么? Linux简介 不同应用领域的主流操作系统 桌面操作系统 Windows (用户数量最多)Mac OS(操作体验好,办公人士首选)Linux(用户数量少) 服务器操作系统 UN…

PCB封装设计指导(十五)验证封装的正确性

PCB封装设计指导(十五)验证封装的正确性 封装建立好之后,我们需要验证封装是否能够正常的放入PCB文件中,最好最直接的办法就是直接放入PCB中来验证。 具体操作如下 任意新建一个空白的PCB文件点击File 选择NEW

ffplay播放器剖析(6)----音视频同步分析

文章目录 1. 音视频同步基础1.1 音视频同步策略1.2 音视频同步概念1.3 FFmpeg中的时间单位1.4 不同结构体的time_base/duration分析1.5 不同结构体的pts/dts分析1.6 ffplay中Frame结构体分析1.7 Vidoe Frame PTS获取及矫正1.8 Audio Frame PTS的获取 2.以音频为基准3.以视频为基…

Pytorch个人学习记录总结 08

目录 神经网络-搭建小实战和Sequential的使用 版本1——未用Sequential 版本2——用Sequential 神经网络-搭建小实战和Sequential的使用 torch.nn.Sequential的官方文档地址,模块将按照它们在构造函数中传递的顺序添加。代码实现的是下图: 版本1—…

Linux文件管理

WINDOWS/LINUX目录对比 Windows: 以多根的方式组织文件 C:\ D:\ E: Linux: 以单根的方式组织文件 / (根目录) Linux目录简介 /目录结构: FSH (Filesystem Hierarchy Standard) [rootlocalhost ~]# ls / bin dev lib media net root srv usr boot etc lib64 misc …

上海科技大学智能生活组齐聚合合信息,“沉浸式”体验人工智能产品

近期,上海科技大学组织本科生产业实践-校企联合人才培养活动,30余名学生组成的“智能生活组”实地参访人工智能及大数据科技企业上海合合信息科技股份有限公司(简称“合合信息”)。本次活动旨在通过项目体验、主题交流&#xff0c…

前端工程化第三章:webpack5基础(下)

文章目录 1. TypeScript支持(ts-loader)1.1. ts-loader1.1.1. webpack.config.js1.1.2. tsconfig.json1.1.3. src/index.ts 1.2. 使用babel-loader将ts转换为js1.2.1. webpack.config.js1.2.2. src/index.ts 2. 代码规范检查(Eslint&#xff…

【JavaScript】 var let const 的区别

在JavaScript中,let、var和const是用于声明变量的关键字,它们之间有一些重要的区别: var: var是在ES5(ECMAScript 5)中引入的声明变量的关键字。变量声明的作用域是函数作用域,而不是块级作用…