<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> ul { padding: 0 } ul li { list-style: none; } .tab ul{ position: relative; background: #333; } .tab ul li { display: inline-block; padding: 50px; 100px; height: 25px; margin: 0; background: #ccc; text-align: center; border: 1px solid #000; } .tab .bottom { position: absolute; left: 0; 100px; height: 3px; background: #f00; transition: all .2s; } </style> </head> <body> <div class="tab" id="box"> <ul ref ="tabWrapper"> <li v-for="(item, index) in list" @click="tabClick(index, $event)">{{item}}</li> <div class="bottom" :style="style"></div> </ul> </div> </body> <script> new Vue({ el:'#box', data:{ list: [1,2,3,4,5], style: {} }, mounted() { this.$nextTick(() => { const firstLi = this.$refs.tabWrapper.querySelector('li:nth-of-type(1)') this.style = { left: firstLi.offsetLeft + 'px', firstLi.offsetWidth +'px' } }) }, methods:{ tabClick(index, e) { console.log(e) console.log(e.target.offsetWidth) console.log(e.target.offsetLeft) this.style = { left: e.target.offsetLeft + 'px', e.target.offsetWidth +'px' } } } }); </script> </html>