<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Example</title>
<style>
/*<!--点击tab切换容器-->*/
.click_tab_container{
width:100%;
height:60px;
background-color: #efefef;
position: fixed;
top:60px;
z-index: 9999;
}
.tab_container_start{
width:33.33%;
height: 60px;
float:left;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/*<!--选中下划线-->*/
.selected_border_container {
width:20px;
height:5px;
background-color:#1684FC;
position: absolute;
bottom: 10px;
}
</style>
</head>
<body>
<!-- your HTML template here -->
<div id="app">
<div class="click_tab_container">
<div class="tab_container_start" v-for="item in tab_list_ctrl" :key="item.id" @click="switchSelectedTab(item.id)">
<div style="color: #1684FC" v-if="item.selected===true">{{item.tab_name}}</div>
<div style="color: gray" v-if="item.selected===false">{{item.tab_name}}</div>
<div class="selected_border_container" v-if="item.selected===true"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
tab_list_ctrl:[
{id:1,tab_name:"全部",selected:true},
{id:2,tab_name:"本月",selected:false},
{id:3,tab_name:"上月",selected:false},
]
},
methods: {
switchSelectedTab(id) {
this.tab_list_ctrl.forEach(tab => {
tab.selected = tab.id === id;
});
console.log(this.tab_list_ctrl);
},
},
});
</script>
</body>
</html>
vue 实现点击切换tab
于 2024-02-10 10:13:12 首次发布