vue中绑定div中的添加监听事件无效

<div id="test">
<input class="shuru" v-model="name" placeholder="请输入您的姓名"></input>
<label>{{name}}</label>
<label>{{fullname}}</label>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>

var btn = document.getElementsByTagName("button");
21 console.log(btn.length)
22 for (let i = 0; i <=btn.length-1; i++) {
23 btn[i].addEventListener("click", function(){
24 console.log(i)
25 },true);
26 }
27 var vue = new Vue({
28 el:"#test",
29 data:{
30 name:"hello",
31 name1:"helloa",
32 date:new Date()
33 },
34 computed:{
35 fullname:function(){
36 return this.name+' '+this.name1;
37 }
38 },
39 mounted:function (){
40 var _this = this;
41 this.timer = setInterval(function(){
42 _this.date = new Date();
43 // console.log(_this.date);Fri Oct 09 2020 13:11:51 GMT+0800 (中国标准时间)
44 },1000)
45 },
46 beforeDsetory:function(){
47 if(this.timer){
48 clearInterval(this.timer);
49 }
50 }
51 })

 

直接这么写的话会发现 点击button按钮没有反应，但是如果将5个button按钮放在数据绑定的div外面，监听事件可以调用