Vue · 拼接html,绑定点击事件
在vue 的html拼接在添加点击事件用原生的onclick来触发事件,将事件挂在window上
·
在vue 的html拼接在添加点击事件用原生的onclick来触发事件,将事件挂在window上
方法一:
<template>
<div v-html="htmlData">
</div>
</template>
<script>
export default {
data() {
return {
htmlData: "",
};
},
mounted() {
window.clickEvent = this.clickEvent;
},
created() {
this.getData();
},
methods: {
getData() {
this.htmlData = '<div οnclick="clickEvent()"></div>';
},
clickEvent(url) {
console.log("getPsd", url);
},
},
};
</script>
方法二:
<template>
<div ref="HTML">
</div>
</template>
<script>
export default {
data() {
return {
htmlData: "",
};
},
mounted() {
window.clickEvent = this.clickEvent;
},
created() {
this.getData();
},
methods: {
getData() {
var str = `
<div οnclick="clickEvent()"></div>
`;
this.$refs.HTML.innerHTML += str
// 解决的方式有很多中大家可已自行百度,例如使用事件代理
// 因为绑定的是原生事件本实例采纳的是以下解决方式
function clickEvent(){
console.log('完美解决');
}
// window.clickEvent=function(event, el){
// console.log('完美解决');
// }
},
},
};
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)