首先我们先学习获取焦点
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 :
这样他只会在预览中直接显示,不会直接启动方法,不会在控制台输出,需要你按回车按键或者提交按键才会确认方法,并且在控制台输出;
右边控制台输出了就代表成功了