vue2使用mathjax渲染数学公式

本篇使用的cdn引入的，再vue的public/inde.html 引入

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script> 

使用watch监听需要渲染的数据是否拿到

  watch: {
    //info是后端返回的数学公式以及文字描述，如果不想渲染文字描述的话，可以让后端给公式添加个标识，方便前端找到对应的公式进行渲染
    info: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.loadMathJax();
        }
      },
    },
    deep: true,
    immediate: true,
  },

再methods这样写

methods:{
    loadMathJax() {
      if (!window.MathJax) {
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.async = true;
        script.src =
          "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML";
        script.onload = () => {
          this.mathJax();
        };
        document.body.appendChild(script);
      } else {
        this.mathJax();
      }
    },
    mathJax() {
      if (window.MathJax) {
        this.MathQueue("latexDiv"); // 渲染对应的id/class
      }
    },
    MathQueue(elementId) {
      if (!window.MathJax) {
        return;
      }
      window.MathJax.Hub.Queue([
        "Typeset",
        window.MathJax.Hub,
        document.getElementsByClassName(elementId),
      ]); // 根据class
    },

}

再template,使用v-html

<div
            class="text_container"
            v-for="(item, index) in info"
            :key="index"
            style="display: flex"
          >
            <span class="latexDiv" v-html="`\\[${item}\\]`"></span>
          </div>

 本篇只是简单引用渲染，根据业务需求，要是展示更为复杂的数学公式，需要进一步了解mathjax