Question

我在其中输入了v-on：change指令来调用我在Vue对象中声明的一些方法。但我意识到每当值发生变化时调用方法都会有延迟。

我在这里复制了它：

HTML

<div id="demo">    
    <input type="number" min=0 v-on:change="change">
    <p>{{num}}</p>
</div>

的Javascript

var data = {
    num:0
}

var demo = new Vue({
    el: '#demo',
    data: data,
  methods: {
    change: function(event) {
        console.log(event.target.value);
      this.num = event.target.value;
    }
  }
})

https://jsfiddle.net/lookman/4y2wmxot/2/

Answer 1

实际上没有延迟，除非您在结果部分的输入字段外单击，否则将不会触发on-change。当焦点从输入字段更改时会触发它，因为在结果部分中手动单击时只有一个元素被触发。

如果您只添加一个组件，就像我here那样，现在您输入一些值并按Tab键，您会立即看到更改，您也可以在您的小提琴中执行此操作，输入值并按Tab键（这会消除焦点）

如果您想在每次更改时触发

您可以使用input事件代替change事件来触发每次更改的方法。

当更改或元素的值时，会同步触发DOM输入事件。

代码更改：

<input type="number" min=0 v-on:input="change">

更新小提琴：https://jsfiddle.net/4y2wmxot/4/

Answer 2

对于这个用例，你真的应该使用v-model：

<div id="demo">    
    <input type="number" min=0 v-model="num">
    <p>{{num}}</p>
</div>

然后根本不需要这个方法：

var data = {
    num:0
}

var demo = new Vue({
    el: '#demo',
    data: data,
})

Answer 3

尝试使用密钥更改：

<input type="number" min=0 v-on:change="change">

https://jsfiddle.net/lookman/4y2wmxot/2/

您是否会面临任何限制，以防止您使用其他类型的活动？

落后于v-on：改变

3 个答案:

如果您想在每次更改时触发