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