随机数字不显示结果

Question

我试图在按下按钮时得到一个随机数，但我做错了什么，它可以与另一个没有功能的示例一起使用，因此我必须做错了一些但找不到内容。现在，它将功能代码打印为文本。

这是html：

<div id="aleatori">
   <button v-on:click="randomNumber">Aleatori</button>
   <p>{{ randomNumber }}</p>
</div>

这是js

var aleatori = new Vue({
    el:'#aleatori',
    data: {
        randomNumber: function () {
            this.random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
          }
    }
})

Answer 1

您应调用方法onclick，并按如下所示在random中更改data：

var aleatori = new Vue({
    el:'#aleatori',
    data() {
        return{
              random:0
        }
    },
    methods:{
      randomNumber() {
            this.random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="aleatori">
     <button v-on:click="randomNumber">Aleatori</button>
     <p>{{ random }}</p>
</div>