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>

  

  

 

posted @ 2020-11-05 15:07  RealWorld♂  阅读(4433)  评论(0编辑  收藏  举报