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 20 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python语言的优势是什么
2020/06/17 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
如何利用find命令查找文件
2016/11/18 面试题
初中化学教学反思
2014/01/23 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
大气污染防治方案
2014/05/19 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
技术经济专业求职信
2014/09/03 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
nginx安装以及配置的详细过程记录
2021/09/15 Servers