Vue 事件的$event参数=事件的值案例
更新时间：2021年01月29日 09:39:04 作者：荣光无限
这篇文章主要介绍了Vue 事件的$event参数=事件的值案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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对象看一下，对象中有哪些属性，如下图
其中srcElement就是当前这个标签元素，可以根据此属性来获取当前点击事件的标签元素。
比如我们可以对获取的元素进行操作，就像原生js那样，如下：
// 获取事件对象e
getRvent(e){
console.log(e);
e.srcElement.style.background="red";
}
点击前：
点击后：
2、除此之外我们还可以对标签自身的属性进行修改，比如说改变button按钮的文字值，这个时候是使用的$event下面的textContent进行修改。
点击按钮之前：
点击按钮之后：
3、我们也可以通过$event获取标签自定义的属性值，如下：
html代码：
<button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>
这个button按钮标签有一个自定义的属性data-get，这时候我们可以根据$event的属性target.dataset.get属性进行获取
可以在控制台打印一下，如下：
其实有时候我们可以用元素本身自带的属性进行操作，摒弃添加class等操作，减少代码的冗余性，细化代码。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。如有错误或未考虑完全的地方，望不吝赐教。
相关文章
项目开发中因为ui设计常常需要修改vue常用的组件库（element,antD等等）,这就需要用到样式穿透,下面这篇文章主要给大家介绍了关于Vue3样式渗透之deep()为什么无效的相关资料,需要的朋友可以参考下2022-11-11
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇解决vue 引入子组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue create、vue webpack init创建vue项目产生的项目文件的区别
这篇文章主要介绍了vue create、vue webpack init创建vue项目产生的项目文件的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue/React子组件实例暴露方法(TypeScript)
最近几个月都在用TS开发各种项目，框架有涉及到Vue3,React18等，记录一下Vue/React组件暴露出变量/函数的方法的写法，对vue react组件暴露方法相关知识感兴趣的朋友跟随小编一起看看吧2022-11-11
vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题
这篇文章主要介绍了vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue下拉框值变动事件传多个参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了Vue中v-html图片过大导致溢出的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
下面小编就为大家分享一篇webpack项目调试以及独立打包配置文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
data属性是Vue实例的数据对象,可以绑定的是对象或者是函数,下面这篇文章主要给大家介绍了关于VUE中data配置项详细解析的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论