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>

  

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM