<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#app{
display: flex;
width: 300px;
height: 60px;
margin: 0 auto;
padding: 0;
list-style: none;
border-bottom: 2px solid red;
}
li{
text-align: center;
color: #000;
background-color: #eee;
}
a{
text-decoration: none;
color: #000;
display: inline-block;
width: 100px;
height: 60px;
line-height: 60px;
}
.active{
background-color: red;
color: #fff;
}
</style>
<body>
<ul id="app">
<li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
<a :class="{active:index===activeIndex}" href="#">{{ item.name }}</a>
</li>
</ul>
//引入vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
activeIndex: 0 ,
list:[
{id:1,name:'京东秒杀'},
{id:2,name:'每日特价'},
{id:3,name:'品牌秒杀'}
]
}
})
</script>
</body>
</html>使用vue2,实现简单的tab切换
最新推荐文章于 2024-03-02 23:16:06 发布
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
