Question

P.S：现在我知道如何解决这个问题。使用v-html

绑定数据

   <div id="app">
    <h1 v-html="math"></h1>
    <button @click='change'>Change</button>
   </div>

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      math: '`sum`'
    }
  },
  methods : {
    change : function() {
      this.math = '`a '+Math.floor((Math.random() * 10) + 1)+'`';
this.$nextTick(function() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       });

    }
  }
})

当我更新数据时，它重复元素??? 我不知道为什么，如何使用vuejs 2更新MathJax？

这是我的应用：Image

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      math: 'sum'
    }
  },
  methods : {
    change : function() {
      this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
this.$nextTick(function() {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
       });

    }
  }
})

Answer 1

您可以替换MathDiv元素的全部内容并调用MathJax.Hub.Typeset（），但是有一种更有效的方法，即向MathJax询问数学的元素jax，并调用其替换方法该元素显示的公式。所以更新后的代码如下：

  <div id="app">
   <h1 >{{ math }}</h1>
    <button @click='change'>Change</button>
  </div>


 <script>   
 var vm = new Vue({
      el: '#app',
      data: function() {
        return {
          math: '`sum_1`'
        }
      },
      mounted: function () {
        this.$nextTick(function () {
          MathJax.Hub.Typeset()    
        })  
      },
      methods : {
        change : function() {
          this.math = 'sum_'+Math.floor((Math.random() * 10) + 1);
          this.$nextTick(function() {
          var math = MathJax.Hub.getAllJax("MathDiv")[0];
            MathJax.Hub.Queue(["Text", math, this.math]);    
          });
        }
      }
    })
</script>

参考：http://docs.mathjax.org/en/latest/advanced/typeset.html#manipulating-individual-math-elements

OR

您可以使用v-html将数据绑定到元素。

使用Vuejs 2更新动态MathJax？

1 个答案: