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

简介: 怎么在页面加载完成之后给html绑定事件呢?Jquery有$.on方法,但是,我不想再vue里边使用jquery。哎呀,迷糊了,原生javascript有onclick呀。

QQ图片20220423231439.jpg

博客做的比较早,那个时候还不知道有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元素添加点击事件。



目录
相关文章
|
9月前
|
资源调度 JavaScript
Vue 3 中如何通过状态管理库来更新虚拟 DOM?
Vue 3 中如何通过状态管理库来更新虚拟 DOM?
270 57
|
9月前
|
JavaScript 开发者
在 Vue 3 中,除了 `markRaw` 和 `reactive` 结合,还有其他方式手动更新虚拟 DOM 吗?
在 Vue 3 中,除了 `markRaw` 和 `reactive` 结合,还有其他方式手动更新虚拟 DOM 吗?
206 57
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
1305 76
|
10月前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
JavaScript 前端开发
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
434 4
|
JavaScript 前端开发 API
|
JavaScript
Vue组件点击事件不触发的问题,添加事件修饰符native解决
Vue组件点击事件不触发的问题,添加事件修饰符native解决
1233 0
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
125 0

热门文章

最新文章