vue中使用@blur获取input val值

在Vue中获取input输入框中的值有很多种方法，其中之一是使用@blur事件。在这里，我会提供一份关于在Vue中使用@blur获取input val值的完整攻略，包含以下内容：

1. 确认input标签和事件监听
2. 在Vue组件中定义处理函数
3. 使用Vue数据绑定语法更新val

下面，我们分别进行详细讲解。

确认input标签和事件监听

首先，我们需要在HTML中创建一个input元素，为其设置id和@blur事件监听，以确保可以在Vue中访问和使用：

<input id="myInput" @blur="updateVal">

如上所示，我们给输入框设置了id为"myInput"，并监听了@blur事件，这意味着每当输入框失去焦点时，Vue都会调用名为"updateVal"的方法。

在Vue组件中定义处理函数

下一步，我们需要在Vue组件实例中定义名为updateVal的方法，用于处理@blur事件触发时的事件：

new Vue({
  el: '#app',
  data: {
    val: ''
  },
  methods: {
    updateVal: function (e) {
      this.val = e.target.value
    }
  }
})

如上所示，我们在Vue实例中定义了一个名为val的数据，以及一个名为updateVal的方法，该方法使用事件对象中的值更新val数据。

使用Vue数据绑定语法更新val

现在，我们已经成功地获取了input输入框的值，但我们还需要将其在Vue模版中显示出来。为此，我们需要使用Vue中的数据绑定语法，将val值呈现在DOM中：

<div id="app">
  <input id="myInput" @blur="updateVal">
  <p>Input Value: {{ val }}</p>
</div>

如上所示，我们使用了{{ val }}的数据绑定语法将val的值呈现在DOM中。

该完整攻略的核心代码示例如下：

<div id="app">
  <input id="myInput" @blur="updateVal">
  <p>Input Value: {{ val }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    val: ''
  },
  methods: {
    updateVal: function (e) {
      this.val = e.target.value
    }
  }
})
</script>

这样，在Vue中使用@blur获取input val值的完整攻略就结束了。如果你有更多的需求，可以根据上述思路，对你的代码进行调整和扩展。