Vue无法给Button按钮添加事件

最新推荐文章于 2025-01-29 18:55:21 发布

原创最新推荐文章于 2025-01-29 18:55:21 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

报错记录专栏收录该内容

14 篇文章

订阅专栏

博客围绕Vue.js报错展开，提到无报错信息，错误代码未给出，错误原因是无法给绑定Vue.js的id设置监听事件，需在id之外操作，最后给出了修改后代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错信息

无

错误代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>

<script src="../js/vue.js"></script>

<script>
  let btn = document.getElementsByTagName("button");
  console.log(btn);
  for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener('click',function (){
      console.log("按钮" + (i+1) + "被点击了");
    })
  }

  let vm = new Vue({
    el: "#app",
    data: {
      message: "你好",
    },
  })
</script>

</body>
</html>

错误原因

无法给绑定Vue.js的id设置一个监听事件,需要在id之外

修改后代码

<body>

  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>

<script src="../js/vue.js"></script>