vue中拼接html，点击事件失效的解决办法

普通情况下拼接html想添加点击事件科通过jquery on绑定事件，但是在vue模板中，这种方法会失效；点击事件并没有反应；

<div class="tag"></div>

var html='<ul class="ultab">'
	+'<li class="active" data-val="0">日</li>'
	+'<li data-val="1">月</li>'
	+'<li data-val="2">年</li>'
	+'</ul>'

$(".tag").append(html);

$(".tag").on("click","li",function(){
	console.log($(this).html())												
});	       

append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件；

页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件没有生效。

解决办法：

<div class="tag"></div>

var html='<ul class="ultab">'
	+'<li class="active" data-val="0" onClick="Fristclick(event,this)">日</li>'
	+'<li data-val="1" onClick="Secondclick(event,this)">月</li>'
	+'<li data-val="2" onClick="Thirdclick(event,this)">年</li>'
    +'</ul>'

$(".tag").append(html);

window.Fristclick = function(event, el) {
   var type=$(el).data("val"); 						    
   this.changeTbody(type)
   $(".ultab li").removeClass('active');	
   $(el).addClass("active");
};
window.Secondclick= function(event, el) {
   var type=$(el).data("val"); 						    
   this.changeTbody(type)
   $(".ultab li").removeClass('active');	
   $(el).addClass("active");
};
window.Thirdclick= function(event, el) {
   var type=$(el).data("val"); 						    
   this.changeTbody(type)
   $(".ultab li").removeClass('active');	
   $(el).addClass("active");
};
 

提示：需要vue页面引入jquery，点击事件需要写在append之后；

npm install jquery --save-dev
main.js 中 import $ from 'jquery'