• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123457018 显示全部楼层 发表于 2021-10-25 20:26:26 |阅读模式 打印 上一主题 下一主题
template
  1. <el-table :data="dataList">
  2. <el-table-column label="id" prop="id"></el-table-column>
  3. <el-table-column label="name" prop="name">
  4. <template v-slot="props">
  5.   <el-input-number
  6.   :min="0"
  7.   v-model="props.row.count"
  8.   @change="updateProduct($event)"
  9.   size="mini"
  10. ></el-input-number>
  11. </template>
  12. </el-table-column>
  13. </el-table>
复制代码
Script 部分
  1. export default {
  2. data() {
  3. return {
  4.   dataList: [
  5.   { id: 1, name: '001', count: 1 },
  6.   { id: 2, name: '002', count: 2 },
  7.   { id: 3, name: '003', count: 3 },
  8.   ]
  9. }
  10. },
  11. methods: {
  12. updateProduct(value) {
  13.   console.info(value)
  14. }
  15. }
  16. }
复制代码
增补:vue学习条记:事故中的$event对象作用
vue中点击事故大概是其他的事故可以通过在事故中添加$event举行对标签元素的dom获取大概修改标签指的属性等等。详细用法如下:
1、可以通过$event举行对dom元素的获取
html:
  1. <button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>
复制代码
首先我们先打印一下$event对象看一下,对象中有哪些属性,如下图

其中srcElement就是当前这个标签元素,可以根据此属性来获取当前点击事故的标签元素。
好比我们可以对获取的元素举行使用,就像原生js那样,如下:
  1. // 获取事件对象e
  2. getRvent(e){
  3.   console.log(e);
  4.   e.srcElement.style.background="red";
  5. }
复制代码
点击前:

点击后:

2、除此之外我们还可以对标签自身的属性举行修改,好比说改变button按钮的笔墨值,这个时间是使用的$event下面的textContent举行修改。
点击按钮之前:

点击按钮之后:

3、我们也可以通过$event获取标签自界说的属性值,如下:
html代码:
  1. <button data-get="数据按钮" @click="getRvent($event)">获取事件对象</button>
复制代码
这个button按钮标签有一个自界说的属性data-get,这时间我们可以根据$event的属性target.dataset.get属性举行获取

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

实在有时间我们可以用元素本身自带的属性举行使用,摒弃添加class等使用,镌汰代码的冗余性,细化代码。
以上为个人履历,渴望能给大家一个参考,也渴望大家多多支持脚本之家。如有错误或未思量完全的地方,望不吝赐教。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作