Vue.JS 值绑定在具有焦点的输入上

本文介绍了Vue.JS 值绑定在具有焦点的输入上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

当输入获得/失去焦点时，有没有办法改变模型中的值?

Is there a way to change a value in the model when an input gets/loses focus?

此处的用例是在您键入时显示结果的搜索输入，这些应该仅在焦点位于搜索框上时显示.

The use case here is a search input that shows results as you type, these should only show when the focus is on the search box.

这是我目前所拥有的:

<input type="search" v-model="query">
<div class="results-as-you-type" v-if="magic_flag"> ... </div>

然后，

new Vue({
  el: '#search_wrapper',
  data: {
    query: '',
    magic_flag: false
  }
});

这里的想法是当搜索框有焦点时 magic_flag 应该变成 true.我可以手动执行此操作(例如，使用 jQuery)，但我想要一个纯 Vue.JS 解决方案.

The idea here is that magic_flag should turn to true when the search box has focus. I could do this manually (using jQuery, for example), but I want a pure Vue.JS solution.

推荐答案

显然，这就像在 事件处理程序.

<input 
  type="search" 
  v-model="query"
  @focus="magic_flag = true"
  @blur="magic_flag = false"
/>
<div class="results-as-you-type" v-if="magic_flag"> ... </div>

这篇关于Vue.JS 值绑定在具有焦点的输入上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！