vue 输入框失去焦点时触发

在Vue中，也可以使用v-on指令来绑定失去焦点事件。与原生JavaScript的onblur事件不同的是，在Vue中我们可以使用v-model指令来双向绑定输入框的值，这样可以方便地获取输入框中的内容。示例代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue" v-on:blur="handleBlur">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleBlur() {
      // 在这里编写失去焦点时要执行的操作
    }
  }
}
</script>

在这个示例中，我们使用v-model指令将输入框的值绑定到了data选项中的inputValue属性上，然后使用v-on指令来绑定失去焦点事件，并在handleBlur方法中编写失去焦点时要执行的操作。当输入框失去焦点时，handleBlur方法将被调用，并且可以通过this.inputValue来获取输入框中的内容。

相关问题

vue输入框失去焦点时触发方法

可以使用`@blur`事件来监听输入框失去焦点的情况，例如：

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur() {
      console.log('输入框失去焦点了')
      // 在这里可以编写处理失去焦点的逻辑
    }
  }
}
</script>

当输入框失去焦点时，`handleBlur`方法会被调用。你可以在这个方法中编写自己的处理逻辑。

vue3 输入框获得焦点时触发

当 Vue3 的输入框获得焦点时，可以通过 `@focus` 事件来触发相应的方法。

在你的模板中，可以这样使用 `@focus` 事件：

<template>
  <div>
    <input type="text" @focus="handleFocus">
  </div>
</template>

然后在你的 Vue 组件中定义 `handleFocus` 方法即可：

<script>
export default {
  methods: {
    handleFocus() {
      console.log('输入框获得焦点了')
    }
  }
}
</script>

这样当输入框获得焦点时，就会触发 `handleFocus` 方法，并在控制台输出相应的信息。