我正在使用vue js动态更新dom,但是我发现在vue更新dom后没有加载我的数学标记。 例如,这段代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msqrt>
<mi>x</mi>
<mi>y</mi>
</msqrt>
</math>
</p>
应该显示xy的平方根。 如果我复制此代码并将其粘贴到干净的html文件中,则效果很好,但如果是通过vue呈现的,则math标签将呈现为普通文本。 有没有办法在更新dom之前强制vue加载数学对象的xmlns模式?
答案 0 :(得分:0)
我后来发现这是浏览器的兼容性问题。 某些浏览器无法呈现数学标记
答案 1 :(得分:-1)
我怀疑您使用的是类似
<p>{{ mathTag }}</p>
当您应该使用v-html
...
<p v-html="mathTag"></p>
甚至更好,假设它是您要动态呈现的特定MathML标签,<component>
new Vue({
data: () => ({
operation: 'msqrt',
identifiers: ['x', 'y']
})
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<math>
<component :is="operation">
<mi v-for="(identifier, i) in identifiers" :key="i">{{ identifier }}</mi>
</component>
</math>
</div>