VUE3(二十八)页面加载完成后,使用onclick为动态添加的dom元素绑定点击事件

17 篇文章 2 订阅
5 篇文章 2 订阅

博客做的比较早,那个时候还不知道有markdown编辑器这个玩意。

所以我的文章都是用ueditor编辑的。

我这里大概想做一个大图的自定义组件:需求是,点击文章中的图片,显示大图。

那么这里就有一个问题,我怎么在页面加载完成之后给html绑定事件呢?

Jquery有$.on方法,但是,我不想再vue里边使用jquery。

哎呀,迷糊了,原生javascript有onclick呀。

上代码:

1:要有一段在页面加载完成之后添加的html代码

let conten=`<button οnclick="come()">点我</button>`;

2:你需要在setup中有一个函数

/**
         * @name: 显示大图
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-03-10 22:37:32
         * @param:  data    type    description
         */
        const come= () => {
            
        }

3:最后一步,搭建桥梁

在setup中添加

window.come= come;

以上就完成,在页面加载完成之后,使用onclick为动态添加的dom元素添加点击事件。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序:

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js中的点击事件可以使用v-on指令(或者简写为@)来绑定。我们可以将点击事件绑定到一个属性、方法或者特殊变量上。 1. 绑定属性示例: ```html <div id="element"> <button @click="count++">点击</button> <p>{{count}}</p> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: '#element', data: { count: 0 } }) </script> ``` 在这个示例中,点击按钮会使count属性增加,并且在模板中显示出来。 2. 绑定方法示例: ```html <div id="element"> <button @click="show">点击</button> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: '#element', data: { count: 0 }, methods: { show: function() { alert("点击调用") } } }) </script> ``` 在这个示例中,点击按钮会调用show方法,弹出一个提示框。 3. 绑定特殊变量示例: ```html <div id="element"> <button @click="show('我被点击了',$event)">点击</button> </div> <script src="http://60.205.187.0/vue/vue.js"></script> <script type="text/javascript"> var demo = new Vue({ el: '#element', data: { count: 0 }, methods: { show: function(message, e) { e.preventDefault(); // 阻止浏览器默认行为 alert(message) } } }) </script> ``` 在这个示例中,点击按钮会调用show方法,并传入两个参数:一个是字符串,一个是特殊变量$event,它代表原生的DOM事件对象。在show方法中,我们可以通过$event获取到原生的DOM事件对象,并对其进行一些操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值