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外面，監聽事件可以調用