mathML中用vue 改变 data 不能更新视图
JS
<script type="text/javascript" src="http://cdn.mathjax.org/mathja...;>
</script>
<script src="http://apps.bdimg.com/libs/jq...;></script>
<script src="https://cdn.jsdelivr.net/npm/...;></script>
<script>
var vm = new Vue({
el:"#app",
data:{
list:{
squrt:33,
qurt:2,
aa:"a",
bb:"b"
}
},
mounted(){
},
methods:{
clickMe(){
this.list.squrt = this.list.squrt * 10;
this.list.aa = 55555;
}
}
})
</script>
html
<body>
<div id="app">
{{ list.squrt }}
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi v-text="list.aa"> x </mi>
<mo> + </mo>
<mi> {{ list.qurt }} </mi>
<mo> + </mo>
<mi> {{ list.squrt }} </mi>
</mrow>
<mo>⏞</mo>
</mover>
</math>
<button id="btn" @click="clickMe">点我</button>
</div>
</body>
CSS
<style>
.MathJax{outline:0;}
</style>