javascript - 函数运行但模板不填充

Question

我通过在我的网站上制作一些小部件来学习 vue。我制作了一个JSFiddle，它滚动两个四面骰子并打印结果。对我来说似乎很简单：

<div id="app">
  <p class="helpertxt">{{ introtxt }}</p>
  <button id="roll-btn" v-on:click="rolladie">ROLL</button>
  <textarea id="die-res" cols="50" rows="3" readonly></textarea>
</div>

vue 实例列出了一个简单的消息。

new Vue({
  el: "#app",
  data: {
    introtxt: 'Version 1.0 rolls 2d4. Press the button!'
  },
  methods: {
    rolladie: function(){
        var res1 = Math.floor((Math.random() * 4) + 1);
        var res2 = Math.floor((Math.random() * 4) + 1);
        var tres = 'You rolled ' + res1 + ', ' + res2;
        document.getElementById("die-res").innerHTML = tres;
        }
    }
})

我不明白为什么消息会出现在 JSFiddle 上，但不会出现在我的网站上。为什么该功能有效但消息没有插入模板？

标签： javascripthtmlvue.js