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

vue.js Vue.js

达蒙Tom

2020-03-11

当输入获得/失去焦点时，是否可以更改模型中的值？

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

这是我到目前为止的内容：

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

第760篇《Vue.JS值绑定在具有焦点的输入上》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
小哥阿飞神奇 2020.03.11

用户将鼠标悬停在输入上时，您可能还想激活搜索-@mouseover = ...

Another approach to this kind of functionality is that the filter input is always active, even when the mouse is in the result list. Typing any letters modifies the filter input without changing focus. Many implementations actually show the filter input box only after a letter or number is typed.

Look into @event.capture.

梅小宇宙 2020.03.11

显然，这就像在事件处理程序上做一些代码一样简单。

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android