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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
新书发布会策划方案
2014/06/09 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
山楂树之恋观后感
2015/06/11 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
24年收藏2000多部退役军用电台
2022/02/18 无线电