1.使用Webpakage新建一个简单的Vue项目

2.再新建项目的public目录下的index.html中，加入如下标签内容

整体MathJax的scriipt的引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>


  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--
    "mathjax": "^3.1.4",-->
  </body>
  <script type="text/javascript"
          async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

</html>

3.新建一个JS目录（随意），用来放初始化MathJax的脚本

里面的内容 如下

let isMathjaxConfig = false;//用于标识是否配置
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
      displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
    },
    "HTML-CSS": {
      availableFonts: ["STIX", "TeX"], //可选字体
      showMathMenu: false //关闭右击菜单显示
    }
  });
  isMathjaxConfig = true; //配置完成，改为true
};
const MathQueue = function (elementId) {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};


export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
}

4.然后在全局引入

也就是在main.js中 加入如图所示代码，具体代码如下

import Vue from 'vue'
import App from './App.vue'
// main.js
import MathJax from './js/MathJax.js' // MathJax.js内容在1.3，位置随意

Vue.prototype.MathJax = MathJax
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

5.最后就是使用，代码如下

<template xmlns:display="http://www.w3.org/1999/xhtml">
  <div class="hello">
    <div>{{text1}}</div>
  </div>
</template>

<script>
  import MathJax from '../js/MathJax'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      text1 : '$$借款本金=\\sum _{nT}^{i=1}\\frac{第i期支付金额}{1+年化综合成本}$$'
    }
  },
  methods: {
    formatMath() {
      let that = this;
      setTimeout(function () {
        that.$nextTick(function () {
          if(MathJax.isMathjaxConfig){//判断是否初始配置，若无则配置。
            MathJax.initMathjaxConfig();
          }
          MathJax.MathQueue("hello");//传入组件id，让组件被MathJax渲染
        })
      },500);
    }
  },
  created() {
    this.formatMath();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

我这里是直接在 建好项目的 HelloWorld.vue 中使用的。

主要做的事情有三个

a:方法 formatMath() 用来初始化 MathJax

b:再页面加载就 调用 a的方法

c:定义数学表达式的 内容，再Html中直接使用

 

数学表到时内容，可以参考该同学的文章https://blog.csdn.net/u010945683/article/details/46757757

GitHub 加速计划 / vu / vue
107
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

Rust编译时计算：`const` 函数、泛型与高级类型体操

摘要： Rust的编译时计算机制通过const函数、泛型和类型体操实现零成本抽象和错误预防。const fn允许纯净计算在编译期执行，支持控制流和断言检查。const泛型将值参数化到类型系统，实现数组尺寸的类型安全验证。类型级编程利用类型属性和Trait进行编译期逻辑验证。const与宏协作扩展元编程能力，用于构建静态配置数据结构。这些特性共同提升了代码安全性（将运行时错误转为编译错误）和性能（消

avatar GitCode 开源社区
cover

【Rust 探索之旅】Rust 微服务架构实战：构建百万级高并发电商系统

avatar GitCode 开源社区

Rust类型系统奇技淫巧：幽灵类型（PhantomData）——理解编译器与类型安全

Rust类型系统高阶技巧：幽灵类型PhantomData深度解析 PhantomData是Rust中一种零开销的编译期标记类型，用于在缺乏实际字段时维护类型系统的契约。它不占用内存，但能显著影响编译器对所有权、生命周期和并发安全的分析。 核心用途包括： 绑定生命周期参数（如PhantomData<&'a T>） 模拟所有权关系（如PhantomData<T>） 控制

avatar GitCode 开源社区