刚接触 vue.js 几天,请教大家一个稍显幼稚的问题。
我想实现一个 latex 代码实时预览的功能,做了一个简单的 DEMO 如下: https://metaquant.coding.me/myspa/latex.html
目标是输入 LATEX 代码,通过引用 MATHJAX 脚本进行渲染,就可以实时预览其效果,核心的 HTML 代码与 JS 代码如下:
<div class="wrap">
<h1>Latex Live Preview</h1>
<div id="main">
<form class="form">
<input type="text" class="form-control" v-model="first">
<span class="help-block">please input your latex code</span>
</form>
<h1 v-text='result'></h1>
</div>
</div>
```javascript
<script type="text/javascript">
var vm = new Vue({
el: '#main',
data: {
first: '\\sqrt {{a^2} + {b^2}}'
},
computed: {
result: function () {
res = '$$' + this.first + '$$';
return res;
}
}
})
</script>
现在能够基本实现预览,但是如果我对输入框进行修改,却达不到实时预览的效果:
![]( https://ws1.sinaimg.cn/large/0066jkbcgw1faw0ubzhkqj30tq0gcwh5.jpg)
请问这是需要不断重新加载脚本?还是因为什么了?