vue 模板字符串里添加html并绑定点击事件

本文介绍如何在Vue中使用模板字符串创建可点击HTML元素,通过`onclick`属性绑定自定义方法,并在`mounted`钩子中将方法复制给window对象以实现点击事件触发。

在Vue中,我们经常会使用模板字符串。当然,现在的模板字符串使用方法也越来越多。

在项目中,经常会遇到一个问题,就是需要在模板字符串中,写一个html元素,如下:

let contentStr = `<p>我是模板字符串,点击我。</p>`

如果需要在点击该html元素时,触发点击事件,那么把模板字符串改成:

let contentStr = `<p onclick="clickFun()">我是模板字符串,点击我。</p>`
// 注意,是onclick,不是@click

同时,定义该方法,并在钩子函数mounted中赋值该方法给window对象

methods: {
    clickFun() {
        // 1、定义绑定的方法
    }
},

mounted() {
    // 2、复制给window对象
    window.clickFun = this.clickFun;
}

如此便大功告成,点击html元素时即可触发点击事件啦~

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值