html5 mathML中用vue 改变 data 不能更新视图?

mathML中用vue 改变 data 不能更新视图

clipboard.png
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>&#x23DE;</mo>    
</mover>
</math>
<button id="btn" @click="clickMe">点我</button>

</div>
</body>

CSS
<style>

.MathJax{outline:0;}

</style>

阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题