（3）块级作用域let和var_如何使用var实现块级作用域-CSDN博客

本文链接：https://blog.csdn.net/m0_44946030/article/details/119282388

实现五个按钮，点击事件，输出哪个按钮被点击了；

<!DOCTYPE html>
<html>
    <body>
    <div id="app">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script> 
        var app=new Vue(
            {el:"#app",
            data:{
               
            },
            methods:{
                
            },
            computed:{
                
            }

})
// 错误方式，var没有作用域，i加到5后就一直不变了
var btns=document.getElementsByTagName('button');
        for(var i=0;i<btns.length;i++)
        { 
                btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮被按');
                 })

        }
// 方式一，通过function的作用域实现
// var btns=document.getElementsByTagName('button');
//         for(var i=0;i<btns.length;i++)
//         { (function (num)
//             {
//                 btns[i].addEventListener('click',function(){
//                 console.log('第'+num+'个按钮被按');
//                  })
//                 }
//             )(i)
//         }
// 方式二，es6的let有作用域
        var btns=document.getElementsByTagName('button');
        for(let i=0;i<btns.length;i++)
        { 
                btns[i].addEventListener('click',function(){
                console.log('第'+i+'个按钮被按');
                 })

        }
        </script>
    </body>
</html>