大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

$event参数在Vue事件中的作用是什么-创新互联

$event参数在Vue 事件中的作用是什么?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联建站主营深泽网站建设的网络公司,主营网站建设方案,app软件开发公司,深泽h5微信小程序开发搭建,深泽网站营销推广欢迎深泽等地区企业咨询

template


 
 
 
  
 
 

Script 部分

export default {
 data() {
 return {
  dataList: [
  { id: 1, name: '001', count: 1 },
  { id: 2, name: '002', count: 2 },
  { id: 3, name: '003', count: 3 },
  ]
 }
 },
 methods: {
 updateProduct(value) {
  console.info(value)
 }
 }
}

补充:vue学习笔记:事件中的$event对象作用

vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。具体用法如下:

1、可以通过$event进行对dom元素的获取

html:

获取事件对象

首先我们先打印一下$event对象看一下,对象中有哪些属性,如下图

$event参数在Vue 事件中的作用是什么

其中srcElement就是当前这个标签元素,可以根据此属性来获取当前点击事件的标签元素。

比如我们可以对获取的元素进行操作,就像原生js那样,如下:

 // 获取事件对象e
 getRvent(e){
  console.log(e);
  e.srcElement.style.background="red";
 }

点击前:

$event参数在Vue 事件中的作用是什么

点击后:

$event参数在Vue 事件中的作用是什么

2、除此之外我们还可以对标签自身的属性进行修改,比如说改变button按钮的文字值,这个时候是使用的$event下面的textContent进行修改。

点击按钮之前:

$event参数在Vue 事件中的作用是什么

点击按钮之后:

$event参数在Vue 事件中的作用是什么

3、我们也可以通过$event获取标签自定义的属性值,如下:

html代码:

获取事件对象

这个button按钮标签有一个自定义的属性data-get,这时候我们可以根据$event的属性target.dataset.get属性进行获取

$event参数在Vue 事件中的作用是什么

可以在控制台打印一下,如下:

$event参数在Vue 事件中的作用是什么

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。


分享名称:$event参数在Vue事件中的作用是什么-创新互联
本文来源:http://dzwzjz.com/article/cdddhi.html
在线咨询
服务热线
服务热线:028-86922220
TOP