vue 将dom元素本身作为参数传递给函数

最新推荐文章于 2023-09-24 09:03:31 发布
最新推荐文章于 2023-09-24 09:03:31 发布
阅读量2.9k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： vue基础 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/brilliantSt/article/details/123098725
在Vue项目中，当遇到图片加载失败的情况，可以通过监听error事件来实现默认图片的替换。关键在于Vue中$event.target属性可以获取到DOM元素，因此可以在error事件处理函数中，通过$event.target.src设置默认图片路径，确保图片能够正常显示。这种方法避免了直接使用this操作DOM，符合Vue的数据驱动理念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题： vue项目中需要将在图片加载失败后加载默认图片，我之前写的博客里面用了普通的 js 方式，可以直接使用 this 把dom对象传递给函数，但是vue里面对this做了处理，是不可以的。

解决方式： vue将dom对象放在了 $event 里面的 target 上面，使用时只需要使用 $event.target 就可以了,这是html部分：

<img :src="path" @error="imgError($event.target)" />

这是 js 部分

imgError(img){
	img.src = 'xxx'    //这个地址必须保证图片能正常显示，不然这个函数会一直执行
}
Vue - 函数的参数传递自身 DOM 对象（标签绑定的函数）
资深程序员
07-30 2975
前言 在原生 js 写法里，想传递自身 DOM 非常简单，如下代码所示： <input type="text" οnchang="go(this)"> function go(e){ console.log(e) // <input type="text" οnchang="go(this)"> } Vue 写法 借助 $event 事件对象，里面有其他参数，其中 target 为自身 DOM 。 以下示例，即为 vue 写法： <input type="text"
Vue实现DOM元素拖放互换位置
觉醒法师的专栏
01-18 5879
HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个 元素为例展示了这些工作是如何完成的。一般来说，在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。
vue方法中传递dom对象示例
weixin_30627341的博客
09-23 3635
<div id="app"> <input type="text" v-on:keyup="onlyNum($event)"> </div> <script> new Vue({ el:"#app", methods: { onlyNum: function (event){ ...
vue 操作dom元素
周家大小姐
01-28 889
 html: &lt;div class="foods-wrapper" ref="foodScroll"&gt; &lt;ul&gt; &lt;!-- 专场 --&gt; &lt;li class="container-list food-list-hook"&gt; &lt;div v-for="(
Vue.$event 内联语句中传入原始dom数据
352328759的博客
05-25 3025
@click=“fun1” //默认传入原始数据 @click=“fun1(‘其它参数’)” //仅传入指定数据 //要传入指定数据 + 原始数据 @click=“fun1($event, ‘其它参数’)” 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法 参考:内联处理器中的方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c
Vue Render函数创建DOM节点代码实例
10-15
在Vue中，`render` 函数接收一个参数 `createElement`，这个函数是用于创建虚拟DOM节点的。在上述代码实例中，我们可以看到如何使用 `createElement` 创建DOM元素： 1. **属性传递**：`createElement` 接受一个标签...
详解在Vue中通过自定义指令获取dom元素
12-08
当指令被应用到元素上时，该方法会被调用，并将对应的DOM元素作为参数传递。在上面的示例中，我们定义了一个名为`run`的自定义指令，它会执行绑定的方法并将当前元素作为参数。 ```javascript directives: { run ...
vue v-on:click传递动态参数的步骤
10-14
本文将介绍如何在Vue中使用v-on:click事件绑定器传递动态参数，这个过程不仅涉及到Vue框架的事件处理机制，还包括了与jQuery结合使用的技巧。 首先，我们来了解Vue中的事件绑定方法。在Vue中，我们使用v-on指令（或...
vue如何获取自定义元素属性参数值的方法
10-17
在Vue框架中，获取自定义元素属性参数值是进行组件间数据传递和操作的常见需求。Vue提供多种方式来获取这些参数值，包括但不限于模板绑定、事件处理、引用DOM元素、以及jq等第三方库的使用。 1. 通过事件对象获取 ...
vue 父组件div的dom传给子组件
weixin_58414196的博客
09-16 682
父组件。
vue路由传参&如何获取dom元素
confidence冯瑶的博客
09-02 724
vue路由如何传参 路由传参有两种方式：query和 params 分别简述一下这两种的区别 query方式: 必须定义path属性，【这个path在浏览器地址栏中是可见的】，通过this.$route.query.参数来接收参数， query有什么好处呢？ 当你刷新页面时，数据是不会丢失的； query传的参数都将会转成字符串 : 比如： this.$router.push({path:'/路由'，query:{ id:[1,2,3] } }) 在接收参数页面打印出来则是 id
Vue3中的组件间传值、依赖注入、双向绑定、获取dom
weixin_48879122的博客
10-04 379
本篇文章讲述了vue3与vue2在件间传值、依赖注入、双向绑定、查找dom上的区别
JS中拼接dom元素时，处理其事件传参（字符串参数）问题
var200的博客
07-13 1648
我们在做前后端数据交互时，往往需要在前端js写入动态的dom对象，例如下面代码： 这里我们可以发现其中dom对象带有一个点击事件并传递了一个叫"javascript"的参数，此时我们触发点击事件打印一下这个参数会发现： 这是因为浏览器将"javascript"这个参数解析成了一个变量，而不是直接传递这个字符串，所以报错未定义。 使用转义符 \ ，给变量添加引号，将变量转化为字符串。......
vue的虚拟dom返回html,【Vue】基础（虚拟DOM & 响应式原理）
weixin_42549037的博客
06-16 766
Vue一如分算需上来处一定迹面数一跳这件我子作的响应式大概会经过新直能分支调二浏页器朋代说，事刚需求下面几个阶段1. 器打好基下是求的响的可域适的一的近重交的使用 Object.defineProperty 把属性全部转为getter/到二新，为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调现了喜知进setter2.览页些求时是过解些这确如目前例总站回广随 属性变更时...
Vue $refs操作 DOM实现组件传值
韩旭的博客
04-05 2769
怎么使用ref 在使用框架的过程中有些时候我们不得不去操作dom节点，那么怎么操作呢？document…直接获取么？ 这样不好！vue不推荐我们操作dom，那么怎么获取元素呢？ ref属性，则起到了它的作用– 我们首先来引用官网的关于ref属性的介绍 什么意思、通俗的讲就是给html标签添加一个ref属性指向一个名称，然后在vue实例当中使用 this.$refs去调用（this.$refs是一...
vue组件间传值的六种方法
King的博客
10-13 8929
vue组件间传值
vue中如何进行DOM转移？
mengran_code的博客
09-24 823
vue关于如何实现DOM转移
Vue 点击事件传递原生DOM事件？
weixin_30549657的博客
04-22 1305
Part.1 问题 如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢？ Part.2 思路 为当前点击的按钮添加一个 单独的类名，我的做法： .active { background: #3C8DBC; color: white } 为当前点击的按钮添加一个 .active 类，但是在每次为当前点击的按钮添加类名时，其它的按钮需要...
vue3绑定函数参数传dom
最新发布
12-26
### Vue3 中绑定事件处理函数并传递当前 DOM 元素作为参数 在 Vue3 中，可以通过 `v-on` 指令来监听 DOM 事件，并通过 `$event` 参数获取触发该事件的 DOM 元素。下面是一个具体的例子展示如何实现这一点。 #### HTML 结构 ```html <div id="app"> <button @click="handleClick($event)">点击这里</button> </div> ``` #### JavaScript 配置 ```javascript const app = Vue.createApp({ setup() { const handleClick = (event) => { console.log(event.target); // 输出按钮元素 }; return { handleClick, }; }, }); app.mount('#app'); ``` 在这个案例中，当用户点击按钮时会调用 `handleClick` 方法并将原始事件对象传入方法内部，在此方法内可通过访问 `event.target` 获取到实际被点击的 DOM 节点[^1]。 另外一种更简洁的方式是在模板语法中直接使用 `$event` 关键字而不需要显式声明它： #### 更简洁的例子 ```html <div id="app"> <button @click="logElement">点击这里</button> </div> ``` #### JavaScript 配置 ```javascript const app = Vue.createApp({ setup() { const logElement = () => { console.log('this is the element:', event.target); }; return { logElement, }; }, }); app.mount('#app'); ``` 需要注意的是在这种情况下，默认行为仍然会被阻止除非手动指定 `.native` 或其他修饰符[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值