vue中关于v-model双向数据绑定v-bind:属性,v-on:事件结合,$event的通俗理解||$event.target的用法||方法中取e.target

11 篇文章 0 订阅
11 篇文章 0 订阅

通过对$event的多次打印结果,可见:

$event是指当前触发的是什么事件(鼠标事件,键盘事件等)

$event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素

下面是例子:


<button @click="console.log($event)" name="哈哈">单击</button>

由于鼠标点击,所以触发鼠标单击事件,打印出来的是事件,如下图:

展开后确实有target属性,且target说明了这是button:

实际上展开target就可以看到更具体的信息,这里不做演示,其实也就是这个button的各种属性等等,直接就是这dom元素。

且看下面这段代码,直接打印出target:

<button @click="console.log($event.target)" name="哈哈">单击</button>

可见打印出来的值就是这个元素本身
我们可尝试获取其属性值:

<button @click="console.log($event.target.name)" name="哈哈">单击</button>

 代码小案例v-model看事件双向绑定

 

所以我们可以利用$event进行一些函数传值之类的特殊操作。目前笔者只发现了有遗漏,欢迎补充。


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值