1 <template>
2 <view>
3 <view class="content" :prop="content" :change:prop="MathJax.updateMathJax" >
4 {{content}}
5 <text v-html="content"></text>
6
7
8 </view>
9 <button @click="changeHandler">change</button>
10 </view>
11 </template>
12
13 <script>
14 export default {
15 data() {
16 return {
17 content: "<div> 關於\\(x\\)的方程\\( \\dfrac {3x-2}{x+1}=2+ \\dfrac {m}{x+1}\\)無解,則\\(m\\)的值為\\((\\) \\()\\) </div>" ,
18 }
19 },
20 onLoad(options) {
21 this.content = options.title;
22
23
24 },
25 onShow() {
26 },
27 methods: {
28 changeHandler () {
29 this.content = '$y=\\frac{1}{5}(3-2x)$'
30 this.index+=1;
31 }
32 }
33 }
34 </script>
35 <script module="MathJax" lang="renderjs">
36 export default {
37 mounted() {
38 if (typeof window.MathJax === 'object') {
39 this.initMathJax()
40 } else {
41 const script = document.createElement('script')
42 script.src = ''
43 script.onload = this.initMathJax.bind(this)
44 document.head.appendChild(script)
45 }
46 },
47 methods: {
48 initMathJax() {
49
50 MathJax.Hub.Config({
51 "HTML-CSS": {
52 availableFonts: ["STIX-Web"],
53 preferredFont: "STIX-Web",
54 linebreaks: { automatic: false },
55 undefinedFamily: "STIXGeneral,'Arial Unicode MS',serif",
56 EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50),
57 webFont: "STIX-Web",
58 imageFont: "",
59 showMathMenu: false,
60 scale: 90
61 },
62 jax: ["input/TeX", "input/MathML", "output/HTML-CSS", "output/NativeMML", "output/CommonHTML"],
63 tex2jax: {
64 inlineMath: [
65 ["$", "$"],
66 ["\\(", "\\)"]
67 ],
68 displayMath: [
69 ["$$", "$$"],
70 ["\\[", "\\]"]
71 ],
72 processEscapes: true,
73 ignoreClass: "tex2jax_ignore|dno"
74 },
75 TeX: {
76 extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"],
77 noUndefined: {
78 attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "100%" }
79 }
80 },
81 messageStyle: "none",
82 extensions: ["tex2jax.js", "mml2jax.js", "MathMenu.js", "MathZoom.js", "CHTML-preview.js"],
83 errorSettings: { message: ["parse..."] },
84 SVG: { linebreaks: { automatic: true }, width: "100% container" },
85 menuSettings: { CHTMLpreview: true }
86 })
87
88 MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])
89 },
90 updateMathJax () {
91 MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])
92 }
93 }
94 }
95 </script>
96 <style lang="scss">
97 .content{font-size: 18px;margin-top: 150px;}
98 </style>