焦点,输入框事件与 v-Model 绑定

首先我们先学习获取焦点

1.获取焦点

 先编写一个 input 标签,加css是为了让我们可以看清楚这个输入框

接下来我们正式开始编写获取与丢失焦点事件:

<template> 标签 代表着他不会与view 一样出现父子级因为,他就是会丢失掉,不论里面有没有内容

 @focus 为获取焦点,点击后在控制台输出focus 然后修改判断 pd 的值为 true 显示出图片

 @blur 为获取焦点,点击后在控制台输出blur 然后修改判断 pd 的值为 false 隐藏掉图片

这样写代码多一点,我们也可以修改成:

因为pd 默认为 false 我们没用点击输入框所以图片就未显示,这样写,不用写方法,变量值也不用通过变量名.value="值" 去改变了

2.输入事件

当我们继续输入的时候有的会有判断,我们可以添加事件 : @input 输入事件,也就是你每次输入的时候会触发的事件

红色的等下会用到, toinput 为我编写的方法

考到右边浏览器的控制台就可以到到,我输出的e就是他的值,我输入了3次他就执行了3次,该事件在我继续删除的时候也会执行,value代表着他的内容值,cursor代表着我当前输入了多少个;

通过 cursor 我们可以对输入的值,进行判断,达到目的;

我们在写一个预览也就是映射输入的值

也可以写成:

还可以通过绑定 v-Model 去实现,就是把 @input 修改成 v-model 就不需要去赋值什么的了

 预览:

3.提交事件

在 input 中还有一个事件与 input事件很相识,但是他不是输入事件,他是回车提交事件: @confirm :

这样他只会在预览中直接显示,不会直接启动方法,不会在控制台输出,需要你按回车按键或者提交按键才会确认方法,并且在控制台输出;

右边控制台输出了就代表成功了