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'))

在表格中如何使用

  
  
    
      
        
          
            
              {{ item.label }}
            
          
          
            {{scope.row[item.key]}}
          
        
      
    
  


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'))
      });
    },
  }
}

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

Mathjax语法总结

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

MathJax基本的使用方式

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/433f76d36e.html

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

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

相关推荐

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