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

当输入获得/失去焦点时，是否有方法更改模型中的值

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

以下是我目前掌握的情况：

... 

然后呢,

newvue({
el:“#搜索包装器”，
数据：{
查询：“”，
魔旗：假
}
});

---

这里的想法是，当搜索框有焦点时，

magic_flag

应该变成

true

。我可以手动执行此操作（例如使用jQuery），但我想要一个纯Vue.JS解决方案。

显然，这只需在上执行一点代码即可

... 

当用户将鼠标滑过输入-@mouseover=

实现此类功能的另一种方法是，即使鼠标位于结果列表中，过滤器输入也始终处于活动状态。键入任何字母都会修改过滤器输入，而不会更改焦点。许多实现实际上仅在键入字母或数字后才显示过滤器输入框

---

查看@event.capture.

在更复杂的场景中处理类似问题的另一种方法可能是允许表单跟踪当前活动的字段，然后使用观察者

我将展示一个快速示例：

<input
    v-model="user.foo"
    type="text"
    name="foo"
    @focus="currentlyActiveField = 'foo'"
>

<input
    ref="bar"
    v-model="user.bar"
    type="text"
    name="bar"
    @focus="currentlyActiveField = 'bar'"
>

在我这里的示例中，如果当前活动字段为

foo

，且值为4个字符长，则下一个字段

栏将自动聚焦。当处理包含诸如信用卡号、信用卡到期日和信用卡安全代码输入的表单时，这种类型的逻辑非常有用。用户体验可以通过这种方式进行改进

我希望这能激发你的创造力。监视程序非常方便，因为它们允许您监听数据模型的更改，并在触发监视程序时根据您的自定义需要进行操作

在我的示例中，您可以看到每个输入都已命名，组件知道当前关注的是哪个输入，因为它正在跟踪
currentlyActiveField

我展示的观察器有点复杂，因为它是一个“深度”观察器，这意味着它能够观察对象和数组。如果没有
deep:true
，则仅当
user
被重新分配时才会触发监视程序，但我们不希望这样。我们正在查看
user
上的键
foo
和
bar

在幕后，
deep:true
正在向
this.user
上的所有键添加观察者。如果未启用
deep
，Vue就不会合理地承担以反应方式维护每个密钥的成本

一个简单的观察者应该是这样的：

watch: {
    user() {
        console.log('this.user changed');
    },
},

注意：如果您发现我有
handler（user）{
，您可以有
handler（oldValue，newValue）{
，但您注意到它们都显示相同的值，这是因为它们都是对相同
用户
对象的引用。请阅读以下内容：

编辑：为了避免深入观看，已经有一段时间了，但我认为您实际上可以观看这样一个关键点：

watch: {
    user() {
        console.log('this.user changed');
    },
},

但如果这不起作用，您也可以制作一个计算道具，然后观看：

computed: {
    userFoo() {
        return this.user.foo;
    },
},

watch: {
    userFoo() {
        console.log('user foo changed');
    },
},

我添加了这两个额外的例子，这样我们可以很快注意到深度观察会消耗更多的资源，因为它触发的频率更高。我个人避免深度观察，而是在合理的情况下更精确地观察

但是，在本例中，对于
user
对象，如果所有键都对应于输入，那么深入观察是合理的。也就是说，它可能是。
您可以通过确定一个特殊的CSS
类来使用平面，例如，这是一个简单的片段：


var vm=new Vue({
el:“#应用程序”，
数据：{
内容：“单击以更改内容”，
平面输入激活：false
},
方法：{
onFocus：功能（事件）{
event.target.select（）；
this.flat\u input\u active=true；
},
onBlur：函数（事件）{
this.flat\u input\u active=false；
}
},
计算：{
clazz:function（）{
var clzz=‘控制表’；
if（this.flat\u input\u active==false）{
clzz+=“仅限文本”；
}
返回clzz；
}
}
})；
#应用程序{
背景：#EEE；
}
input.only-text{/*特殊css类*/
边界：无；
背景：无；
}

您也可以编写方法并调用它们，而不是将太多的逻辑放入模板中。但这种方式完全可以。我看不到vue的文档和api上的焦点和模糊，它是否列出了我遗漏的地方？@KelvinZhao它们是本机js事件，这就是为什么它们没有列在vue文档中的原因。焦点可能是c如果经常更改，您可能希望使用“v-show”而不是“v-if”，请参见
computed: {
    userFoo() {
        return this.user.foo;
    },
},

watch: {
    userFoo() {
        console.log('user foo changed');
    },
},