Question

我想在按键时从列表中显示不同的随机单词。

“显示随机单词”部分可以正常工作：

var vm = new Vue({
  el: "#root",
  data: {
    verbs: ['parier', 'coûter', 'couper', 'blesser']
  },
  computed: {
    verb: function() {
      return this.verbs[Math.floor(Math.random() * this.verbs.length)];
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="root">
  {{verb}}
</div>

我现在想将按键绑定到verb的重新计算。 我该怎么做？

event handling上的文档建议使用v-on:keydown - 我可以添加JavaScript（例如v-on:keydown="alert()"），但不知道如何触发重新计算值（我试过{ {1}}但它不起作用。）

Answer 1

按设计计算的值理想情况下运行一次。

Vue的创建者Evan提到的

One solution是在组件创建时附加一个全局监听器，然后直接调用你的方法。

var vm = new Vue({
  el: "#root",
  data: {
    verb: '',
    verbs: ['parier', 'coûter', 'couper', 'blesser']
  },
  methods: {
    getRandomVerb: function() {
      this.verb = this.verbs[Math.floor(Math.random() * this.verbs.length)];
    }
  },
  mounted() {
      window.addEventListener('keydown', this.getRandomVerb)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="root">
  {{verb}}
</div>

要让演示正确响应，请运行代码段，然后在代码段窗口中单击并开始输入。将显示随机动词。

如何在按键时重新评估计算值？

1 个答案: