vue项目前端展示数学公式(在表格中渲染)

现有需求为 将实验数据录入表格中,需要表格呈现物理公式,使用Mathjax在vue2中 进行呈现

1.安装

npm i --save mathjax-vue

2.全局注册(main.js中)

import MathJax, { initMathJax, renderByMathjax } from 'mathjax-vue'function onMathJaxReady() {const el = document.getElementById('elementId');renderByMathjax(el).then(r => {});
}initMathJax({}, onMathJaxReady)// vue 2
Vue.use(MathJax)// vue3
createApp(App).use(MathJax)

  私有组件 

import { MathJax } from 'mathjax-vue'
// 必须先执行过initMathJax
export default {...components: {MathJax,},...
}

 不想插入组件

// 必须先执行过initMathJax
import { renderByMathjax } from 'mathjax-vue'renderByMathjax(document.getElementById('id1'))

在表格中如何使用

<template><!--测 信号电压及频率 表--><div><el-table :data="tableData" border><template v-for="(item, index)  in tableHeader"><el-table-column :key="item.key" :label="item.label" :prop="item.key" align="center" show-overflow-tooltip><template slot-scope="scope" slot="header"><div class="mathjaxDom">{{ item.label }}</div></template><template slot-scope="scope"><div>{{scope.row[item.key]}}</div></template></el-table-column></template></el-table></div>
</template>
<script>
import {renderByMathjax} from 'mathjax-vue';
import {log} from "video.js";export default {data() {return {tableHeader: [{key: 'signal',label: '待测信号'}, {key: 'MD',label: 'm(div)'},{key: 'Dy',label: `$\{D_y}(V/div)$`},{key: 'ND',label: 'n(div)'},{key: 'Dt',label: `$\{D_t}(s/div)$`},{key: 'Vp',label: `$\{V_p}=\{D_y}m(V)$`},{key: 'T',label: `$T=\{D_t}n(Hz)$`},],tableData: [{signal: '2V,50Hz', MD: '1', Dy: '2',ND:'3',Dt:'4',Vp:'5',T:'6' },{signal: '4V,1000Hz', MD: '1', Dy: '2',ND:'3',Dt:'4',Vp:'5',T:'6' },]}},mounted() {this.renderFormula();},methods: {// 填充公式renderFormula() {this.$nextTick(() => {renderByMathjax(document.getElementsByClassName('mathjaxDom'))});},}
}
</script><style lang="less" scoped></style>

 ps:渲染公式 需要先拿到对应的DOM元素

Mathjax语法总结

使用MathJax 3 渲染数学公式及在Vue中的使用

MathJax基本的使用方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

显示本地 IP 地址和相应的 QR 码,方便用户共享和访问网络信息

这段代码使用了 wxPython、socket、qrcode 和 PIL&#xff08;Python Imaging Library&#xff09;模块来生成一个具有本地 IP 地址和相应 QR 码的窗口应用程序。 C:\pythoncode\new\showipgenqrcode.py 让我们逐行解释代码的功能&#xff1a; import wx&#xff1a;导入 wx…

jdbc235

概念&#xff1a;java database connectivity java数据库连接 java语言操作数据库 定义了一套操作所有关系型数据库的规则&#xff08;接口&#xff09; 本质&#xff1a;其实是官方公司定义了一套操作所有关系型数据库的规则&#xff0c;即接口。各个数据库厂商去实现这套接…

百度“AI智障”到AI智能体验之旅

目录 前言一、百度PLATO1.抬杠第一名2.听Ta瞎扯淡3.TA当场去世了4.智障与网友的高光时刻 二、文心一言1.设计测试用例2.随意发问3.手机端约会神器 三、体验总结&#xff1a;四、千帆大模型 前言 最近收到了文心一言3.5大模型的内测资格&#xff0c;正巧之前也体验过它的前身&q…

医疗小程序:让服务更高效,用户体验更优化

随着移动互联网的快速发展&#xff0c;小程序已经成为了一个热门的开发方向。医疗健康类小程序也不例外&#xff0c;拥有广泛的市场需求和前景。本文将为你提供一份完整的医疗健康类小程序开发攻略&#xff0c;帮助你快速开发上线一个专业成熟的小程序商城。 一、选择合适的小程…

软件架构设计(二) 软件架构风格其他风格简介

架构师备战(四)-软件架构设计(二) 软件架构风格其他风格简介 架构风格其实是很重要的知识,我们先了解了基本的五种架构风格, 我们之前也提到除了这五种风格之外, 还有一些没有收录在这几种风格之内的, 这次会去做一个探索。 1、闭环控制架构风格(过程控制)【重要】 概念 …

isEmpty 和 isBlank 的区别

干了3年java&#xff0c;代码中 isEmpty 和 isBlank 的区别 都不知道&#xff0c;一顿瞎用。也许你两个都不知道&#xff0c;也许你除了isEmpty/isNotEmpty/isNotBlank/isBlank外&#xff0c;并不知道还有isAnyEmpty/isNoneEmpty/isAnyBlank/isNoneBlank的存在, come on ,让我们…

springboot文件上传异步报错

因为迁移的生产环境&#xff0c;在新的服务器发生了之前没有遇到的问题&#xff0c;这种问题是在异步文件上传的时候才会出现 错误信息如下 16:17:50.009 ERROR c.w.einv.minio.service.impl.MinioFileServiceImpl - 文件上传错误! java.io.FileNotFoundException: /applicati…

列化复杂的xml对应的类

你能帮我写一个序列化复杂的xml对应的类吗? c#代码 好的,可以试着为一个复杂的XML生成对应的C#类。这里我就简单的XML为例: <Book><Name>Design Patterns</Name><Author>Erich Gamma</Author><Pages>395</Pages><Chapters>…

嵌入式学习笔记(7)ARM汇编指令4-多寄存器指令

多寄存器访问指令 ldr/str每周期只能访问4字节内存&#xff0c;如果需要批量读取、写入内存的话太慢&#xff0c;解决方案就是ldm/stm&#xff0c;ldm(load register multiple)&#xff0c;stm(store register multiple) 举例&#xff1a; stmia sp, {r0 - r12} 将r0存入sp指…

Message: ‘chromedriver‘ executable may have wrong permissions.

今天运行项目遇到如下代码 driverwebdriver.Chrome(chrome_driver, chrome_optionsoptions)上述代码运行报错如下&#xff1a; Message: chromedriver executable may have wrong permissions. Please see https://sites.google.com/a/chromium.org/chromedriver/home出错的原…

linux scp命令

scp命令 在开发时经常会遇到两台机器之间传文件或者安装包&#xff0c;这就用到了scp命令 # scp [参数] 文件源 文件目标# 本地复制到远程 rootremote2:/opt/data/hadoop----->表示 用户地址:文件目录scp -r /opt/data/hadoop rootremote2:/opt/data/hadoop# 远程复…

JPA在不写sql的情况下实现模糊查询

本文已收录于专栏 《Java》 目录 背景介绍概念说明单字段模糊匹配&#xff1a;多字段模糊匹配&#xff1a; 实现过程代码实现1.写一个实体类去实现Specification接口&#xff0c;重写toPredicate方法2.定义一个接口去继承JpaRepository接口&#xff0c;并指定返回的类型和参数类…

RISC-V 中国峰会 | OpenMPL引人注目,RISC-V Summit China 2023圆满落幕

RISC-V中国峰会圆满落幕 2023年8月25日&#xff0c;为期三天的RISC-V中国峰会&#xff08;RISC-V Summit China 2023&#xff09;圆满落幕。本届峰会以“RISC-V生态共建”为主题&#xff0c;结合当下全球新形势&#xff0c;把握全球新时机&#xff0c;呈现RISC-V全球新观点、新…

Truncation Sampling as Language Model Desmoothing

本文是LLM系列文章&#xff0c;针对《Truncation Sampling as Language Model Desmoothing》的翻译。 截断采样作为语言模型的去平滑性 摘要1 引言2 背景3 截断作为去平滑性4 方法5 实验与结果6 相关工作7 结论8 不足 摘要 来自神经语言模型的长文本样本可能质量较差。截断采…

CSS中如何实现元素的渐变背景(Gradient Background)效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS 渐变背景效果⭐ 线性渐变背景⭐ 径向渐变背景⭐ 添加到元素的样式⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&…

get√接口自动化核心知识点浓缩,为面试加分

日常接触到的接口自动化从实际目标可以划分为两大类&#xff1a; 1、为模拟测试数据而开展的接口自动化 这种接口自动化大多是单次执行&#xff0c;目的很明确是为了功能测试创造测试数据&#xff0c;节约人工造数据的时间和人工成本&#xff0c;提高功能测试人员的测试效率。…

【C语言练习】C语言如何操作内存(重中之重!!!)

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

SpringCloud(十)——ElasticSearch简单了解(二)DSL查询语句及RestClient查询文档

文章目录 1. DSL查询文档1.1 DSL查询分类1.2 全文检索查询1.3 精确查询1.4 地理查询1.5 查询算分1.6 布尔查询1.7 结果排序1.8 分页查询1.9 高亮显示 2. RestClient查询文档2.1 查询全部2.2 其他查询语句2.3 排序和分页2.4 高亮显示 1. DSL查询文档 1.1 DSL查询分类 查询所有…

import type {} from ‘module‘ 具体解释

import type { AxiosInstance, AxiosRequestConfig } from axiosimport type { RequestConfig, RequestInterceptors } from ./typesimport type {} from module 是 TypeScript 中的一种导入语法&#xff0c;用于导入类型声明而不导入具体的值&#xff0c;它告诉 TypeScript 编…

mysql数据文件

提示&#xff1a;mysql相关系列的教程和笔记不断持续更新和完善 文章目录 db.opt 文件FRM 文件MYD 文件MYI 文件IBD 文件和 IBDATA 文件 :ibdata1 ibdata n文件 查看数据文件的位置 获取硬盘中数据存储的位置&#xff1a; SHOW VARIABLES LIKE datadir;db.opt 文件 该文件记录…