vue.js 中动态拼接innerHTML时添加点击事件
思路:div动态添加段落,段落中添加onclick()事件,onclick跳到jQuery中的方法,jQuery的方法再调用Vue内的方法。
<body> <div id="insertpos" class="insertpos" style="height:70%;width:100%;overflow:auto;"> </div> </body>
<script type="text/javascript">
var vm = new Vue({
el: '#host-view',
data: {
},
methods: {
innerHTML : function(){
var objBody = document.getElementById("insertpos");// div
var blockquote = document.createElement('blockquote');
var audioname = "\'"+record-a5b4f594eab9ba08-1604481035645.wav+"\'";//字符串类型,前后加上单引号,使用转义字符\'
var offset = 67;
var html = '<p onclick="clickText('+offset+','+audioname+')" >测试文本</p>';
blockquote.innerHTML = html;
//objBody.appendChild(blockquote);//旧数据在前
objBody.insertBefore(blockquote, objBody.firstChild);//新数据在前
},
clickT : function(start,audioName){
console.log(start,audioName);
}
}
});
function clickText(start,audioname){//点击段落,先跳到jQuery在调用Vue的方法
vm.clickT(start,audioname);
}
</script>