javascript - 如何在 vue.js 中使用 onfocusout 函数？

Question

我想在光标从一个文本框移动到下一个文本框时立即调用一个函数。应在单击选项卡时或在输入预期条目并移至下一个条目后进行函数调用。

Answer 1

使用 v-on directive为 blur 添加事件监听器或 focusout 在 <input> 上:

v-on:EVENT_NAME="METHOD"

示例:

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

或更短的语法:

@EVENT_NAME="METHOD"

示例:

<input @blur="handleBlur">

new Vue({
  el: '#app',
  methods: {
    handleBlur(e) {
      console.log('blur', e.target.placeholder)
    },
    handleFocusout(e) {
      console.log('focusout', e.target.placeholder)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

<div id="app">
  <fieldset>
    <legend>blur</legend>
    <input @blur="handleBlur" placeholder="first name">
    <input @blur="handleBlur" placeholder="last name">
  </fieldset>
  <fieldset>
    <legend>focusout</legend>
    <input @focusout="handleFocusout" placeholder="email">
    <input @focusout="handleFocusout" placeholder="phone">
  </fieldset>
</div>