当前位置: 首页 > news >正文

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.lryc.cn/news/150886.html

相关文章:

  • java八股文面试[数据库]——MySQL索引的数据结构
  • python3.11教程2:基础数据类型(数字和字符串)、组合数据类型(集合、元组、列表、字典)
  • 剑指 Offer 44. 数字序列中某一位的数字(中等)
  • SpringBoot中HttpClient的学习
  • JVM-内存溢出的原因、CPU占满的原因
  • 如何做好银行统一报送系统UI设计
  • 988. 从叶结点开始的最小字符串
  • RealSense D455启动教程
  • docker与phpstudy两种方式部署wordpress 并 开启伪静态
  • 网站搭建最简化的引导操作 | 云服务器的购买选用 | 域名的选用 | 网站的上线和备案。
  • Spring Cloud Foundry上使用通配符模式匹配进行的安全绕过漏洞 CVE-2023-20873
  • 简述SpringMVC
  • vue竖向步骤条
  • java八股文面试[多线程]——Synchronized优化手段:锁膨胀、锁消除、锁粗化和自适应自旋锁
  • 【数据结构】队列---C语言版(详解!!!)
  • java:详解http模块request对象
  • 力扣20. 有效的括号
  • 用springboot+elasticserach7的demo,对比sider和百度ai的异同
  • Python的pymysql模块与MySQL数据库的互动:基础与实例
  • 滑动窗口实例1(长度最小的子数组)
  • EI、Scopus双检索| 2023年第四届自动化、机械与设计工程国际会议
  • 【混合时变参数系统参数估计算法】使用范数总和正则化和期望最大化的混合时变参数系统参数估计算法(Matlab代码实现)
  • vue的公共方法封装以及class高阶封装
  • OpenGL-入门-BMP像素图glReadPixels(1)实现读取屏幕中间的颜色和获取屏幕上鼠标点击位置的颜色
  • 斥资4亿,收购这家WLAN厂商,结果……
  • 【简单】2511. 最多可以摧毁的敌人城堡数目
  • Linux用一键安装包部署禅道(18.5版本)
  • 【2】openGL shader着色器分析三角形填色
  • mysql数据表Table is marked as crashed and should be repaired 的解决办法
  • 【Unity基础】1.项目搭建与视图编辑