vue中使用@blur获取input val值

在Vue中，我们可以使用v-on指令来绑定事件。在input元素输入完成之后，我们可以使用@blur事件来获取其value值。

示例1：获取input元素值并输出到控制台

先来看一个简单的示例。我们在input元素上定义@blur事件，并在方法中通过$event.target.value获取其值，最后将其输出到控制台。

<template>
  <div>
    <input type="text" @blur="onInputBlur($event)">
  </div>
</template>

<script>
export default {
  methods: {
    onInputBlur(event) {
      console.log(event.target.value)
    }
  }
}
</script>

在这个例子中，我们定义了一个方法onInputBlur来处理@blur事件传递过来的参数，并使用event.target.value获取input元素的值。最后我们使用console.log将值输出到控制台中。

示例2：使用v-model和计算属性实现数据双向绑定

除了通过@blur绑定@input事件以外，我们还可以使用v-model进行双向数据绑定，简化代码量和加强可维护性。在此，我们可以使用计算属性来获取v-model所绑定的值。

<template>
  <div>
    <input type="text" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  computed: {
    inputValueComputed: {
      get() {
        return this.inputValue
      },
      set(val) {
        console.log(val)
        this.inputValue = val
      }
    }
  }
}
</script>

在这个例子中，我们使用v-model绑定了一个变量inputValue，并在计算属性inputValueComputed中进一步获取了inputValue的值，并在对应的set方法中进行一些操作。在此示例中，我们将inputValue的值输出到控制台上。

需要注意的是，可以自由增加相关代码来处理获取input元素值的需求，但为了保证代码的可维护性和易读性，应当尽可能使代码和逻辑的结构简化，提高代码复用率和可维护性。