Vue 事件的$event参数=事件的值案例


Posted in Vue.js onJanuary 29, 2021

template

<el-table :data="dataList">
 <el-table-column label="id" prop="id"></el-table-column>
 <el-table-column label="name" prop="name">
 <template v-slot="props">
  <el-input-number
  :min="0"
  v-model="props.row.count"
  @change="updateProduct($event)"
  size="mini"
 ></el-input-number>
 </template>
 </el-table-column>
</el-table>

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:

<button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>

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

Vue 事件的$event参数=事件的值案例

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

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

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

点击前:

Vue 事件的$event参数=事件的值案例

点击后:

Vue 事件的$event参数=事件的值案例

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

点击按钮之前:

Vue 事件的$event参数=事件的值案例

点击按钮之后:

Vue 事件的$event参数=事件的值案例

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

html代码:

<button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>

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

Vue 事件的$event参数=事件的值案例

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

Vue 事件的$event参数=事件的值案例

其实有时候我们可以用元素本身自带的属性进行操作,摒弃添加class等操作,减少代码的冗余性,细化代码。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。如有错误或未考虑完全的地方,望不吝赐教。

Vue.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 #Vue.js
vue穿梭框实现上下移动
Jan 29 #Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 #Vue.js
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP学习之数组值的操作
2011/04/17 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python的标准模块包json详解
2017/03/13 Python
Python正则表达式经典入门教程
2017/05/22 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python的faker库用法
2019/11/28 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
5款实用的python 工具推荐
2020/10/13 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
初中地理教学反思
2014/01/11 职场文书
平安校园建设方案
2014/05/02 职场文书
学校证明范文
2015/06/24 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
python绘图subplots函数使用模板的示例代码
2021/04/30 Python