在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。我们今天要说的是用v-bind绑定元素点击事件实现
1.css部分:
.tab{
width: 240px;
height: 40px;
display: flex;
}
.tabItem{
width: 80px;
height: 40px;
border: 1px solid #cccc;
text-align: center;
line-height: 40px;
}
.tabItemActive{
width: 80px;
height: 40px;
background-color: pink;
border: 1px solid #cccc;
text-align: center;
line-height: 40px;
}
html部分:
<div id="app">
<div class="tab">
<div :class="index==0 ? 'tabItemActive' : 'tabItem'" @click="index=0">首页</div>
<div :class="index==1 ? 'tabItemActive' : 'tabItem'" @click="index=1">详情</div>
<div :class="index==2 ? 'tabItemActive' : 'tabItem'" @click="index=2">客服</div>
</div>
</div>
js部分:
<script src="js/vue.js"></script>
<script>
const vm = new Vue({
// 挂载dom
el: "#app",
data:{
index:0
},
})
</script>