<html >
<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;
width: 100px;
height: 25px;
margin: 0;
background: #ccc;
text-align: center;
border: 1px solid #000;
}
.tab .bottom {
position: absolute;
left: 0;
width: 100px;
height: 3px;
background: #f00;
transition: all .2s;
}
</style>
</head>
<body>
<div class="tab" >
<ul ref ="tabWrapper">
<li v-for="(item, index) in list" @click="tabClick(index, $event)">{{item}}</li>
<div class="bottom" :></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',
width: 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',
width: e.target.offsetWidth +'px'
}
}
}
});
</script>
</html>