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

这篇具有很好参考价值的文章主要介绍了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基本的使用方式文章来源地址https://www.toymoban.com/news/detail-816929.html

到了这里,关于vue项目前端展示数学公式(在表格中渲染)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(59)
  • vue项目中定制化音频展示,wavesurfer.js基本使用

    效果图: wavesurfer是一个可定制的音频波形可视化,建立在Audio API和HTML5 Canvas之上。 基本使用: wavesurfer常用参数: container:必填,可以是唯一的css3选择器,也可以是DOM元素 scrollParent:true/false,要使波形滚动。 audioRate:播放音频的速度。数字越小越慢。 backgroundColor:更改波

    2024年02月08日
    浏览(41)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(63)
  • vue页面中展示markdown以及katex公式

    数据库中有markdown语法的字符串,需要展示为正常的页面,难点在于其中的katex数学公式 使用 showdown 及其族系插件 npm i showdown npm i showdown-katex 如果公式中有开根号,那么这个公式会出现两次。第一次是正常根号展示,第二次是根号内公式和一个无限长的根号。解决方法是用样

    2024年02月03日
    浏览(35)
  • vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】

    文章内容 文章链接 vue3 antd table 表格的基础搭建 https://blog.csdn.net/XSL_HR/article/details/128072745 ant design vue 组件库的引入与使用 https://blog.csdn.net/XSL_HR/article/details/127396384 在 后台管理系统 中,我们需要 对大量的数据进行展示、处理和操作 ,table表格也因此无处不在。而 ant design

    2024年01月25日
    浏览(56)
  • 前端-layui动态渲染表格行列与复杂表头合并

    说在前面: 最近一直在用layui处理表格 写的有些代码感觉还挺有用的,顺便记录下来方便以后查看使用; HTML处代码 拿到id 渲染位置表格 CSS 重点来了 JS代码 合并表头需要在 cols中传入[ [ ],[ ] ]这种数组类型的格式; 主要就是不合并的表头都加上rowspan:2(代表行跨度为2) c

    2024年02月07日
    浏览(48)
  • 【项目展示】Unity 海洋场景渲染(Boat Attack Water、光谱渲染)

      前几个月开始做的项目,需要一个使用海洋场景。但是因为项目很急,所以海水需要使用别人已经写好的开源代码。当时就想起了Unity曾经有一个URP宣传片中的海水似乎还不错,于是便基于此项目的海水进行修改(Unity在GitHub上有两个项目,一个是Boat Attack,也就是宣传片

    2024年02月16日
    浏览(41)
  • 【前端】vue.js从入门到项目实战笔记

    【前端目录贴】 文本插值中的代码被解释为节点的文本内容,而HTML插值中的代码则被渲染为视图节点。 3.1.1 文本插值 文本插值的方式:用 双大括号 将要绑定的变量、值、表达式括住就可以实现,Vue将会 获取计算后的值 ,并以 文本的形式 将其展示出来。 结果: 3.1.2 HTM

    2024年01月21日
    浏览(53)
  • vue2使用 element表格展开功能渲染子表格

     默认样式 修改后   样式2 模拟数据 修改默认样式 

    2024年01月17日
    浏览(48)
  • vue2组件库:表格数据展示通用页面

    2024年02月11日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包