vue 拼接html添加点击事件
在项目中某些情况不能使用vue的模板,需要拼接出html。在网上看了很多资料发现都不行,最后使用最原始的方法,在此记录一下。一开始我的思路是点击事件调用vue中的方法,html字符串如下,使用的是es6的模板字符串:var contentHtml = `<div><div class="title"><span>情况信...
·
在项目中某些情况不能使用vue的模板,需要拼接出html。在网上看了很多资料发现都不行,最后使用最原始的方法,在此记录一下。
一开始我的思路是点击事件调用vue中的方法,html字符串如下,使用的是es6的模板字符串:
var contentHtml = `<div>
<div class="title">
<span>情况信息</span>
</div>
//.....其他详细内容
<div class="event-detail-btn" onclick="${this.gotoDetail(obj.pid})}">>></div>
</div>`;
但是发现这样会导致gotoDetail方法默认被调用,哪位大神知道这个要怎么解决呢。
我现在的方法是使用原生的document.createElement方法,在最外层嵌套一个div,将有点击事件的div通过appendChild拼接上去:
var html = document.createElement("div");
var contentHtml = `<div>
<div class="title">
<span>情况信息</span>
</div>
//.....其他详细内容
</div>`;
html.innerHTML=contenthtml;
let btn = document.createElement("div");//按钮
btn.setAttribute("class","event-detail-btn");
btn.innerHTML=">>";
btn.onclick=function(){
$this.$router.push({name:"detail2",params:{pid:obj.pid}});
}
html.appendChild(btn);
大家如果有更好的方法交流一下呀。
更多推荐
已为社区贡献2条内容
所有评论(0)