项目开发中，固定列表是很常见的，有时候我们需要得到元素的下标去做一些事情，但是少了v-for想要获取下标就比较困难了，下面我便介绍我的方法：
其实我用的方法很简单，就是用事件委托机制去获取事件发生的元素，再获取父元素的子元素集合，再遍历子元素集合，当事件发生元素等于子元素集合中的某一个时，返回数组下标，即可得到事件发生元素的下标。
<template><div class="footer-tab"><div class="tab-item">home</div><div class="tab-item">second</div><div class="tab-item">third</div></div></template><script>export default {name: 'commonFooter',data() {return {}},created() {},mounted(){let _this=this;//事件委托document.querySelector(".footer-tab").addEventListener("click",function(e){let target=e.target;//事件发生的元素let nodeList=e.target.parentNode.children;//同级元素集合let targetIndex=_this.tabIndex(target,nodeList);//调用tabIndex方法，返回值便是元素下标console.log(targetIndex)//打印当前点击元素的下标})},methods: {/**** @param target 事件触发的元素* @param nodeList 元素集合* @returns {number} 返回事件触发元素的下标*/tabIndex(target,nodeList){for(let i=0;i<nodeList.length;i++){if(target===nodeList[i]){return i;}}}}}</script><style scoped></style>
如果觉得《Vue 点击获取当前元素下标》对你有帮助，请点赞、收藏，并留下你的观点哦！
