Vue.JS 值与具有焦点的输入相关联

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

这里的用例是一个搜索输入，它会在您键入时显示结果，这些结果应该仅在焦点位于搜索框上时显示。

这是我到目前为止所拥有的：

<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 解决方案。

显然，这就像在上面写一些代码一样简单事件处理程序 https://v2.vuejs.org/v2/guide/events.html.

<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>