vue中input的input事件怎么用

在Vue中，可以使用`@input`或者`v-on:input`来监听`input`事件。例如：

<template>
  <div>
    <input type="text" v-model="message" v-on:input="onInput">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onInput(event) {
      console.log(event.target.value)
    }
  }
}
</script>

在上面的例子中，我们在`input`元素上使用了`v-model`指令来绑定`message`的值，然后使用`v-on:input`或者`@input`来监听`input`事件，当输入框的值发生改变时，会触发`onInput`方法，我们可以在这个方法中获取输入框的值。

相关问题

vue中input的input事件

在Vue中，可以使用v-model指令来绑定表单元素和组件的数据。v-model指令实际上是一个语法糖，它会自动转换为一个值绑定和一个监听事件。

当使用v-model指令绑定input元素时，它会自动监听input事件，即用户在输入框中输入文字时，会触发input事件，然后更新Vue实例中绑定的数据。

例如：

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上面的例子中，当用户在输入框中输入文字时，会触发input事件，然后更新Vue实例中的message数据，同时也会更新页面上的文本内容。

vue中input失去焦点事件

在Vue中，可以通过v-on指令绑定事件来实现input失去焦点事件。具体实现方法如下：

1. 在input标签中添加v-on:blur指令，绑定一个方法，当input失去焦点时调用该方法。

<input v-on:blur="handleBlur">

2. 在Vue实例中定义handleBlur方法，该方法会在input失去焦点时被调用。

new Vue({
  el: '#app',
  methods: {
    handleBlur: function () {
      console.log('失去焦点了');
    }
  }
})

完整代码如下：

<template>
  <div>
    <input v-on:blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur: function () {
      console.log('失去焦点了');
    }
  }
}
</script>