思路: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>