<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app>span{
margin-right: 20px;
}
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<span
v-for="(item,index) in arr"
:class="{active:index == ind}"
@click="tabChange(index)">
{{item}}
</span>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
arr:['首页',"官方自营",'抖音热搜','服饰箱包'],
active:'active',
ind:"0"
},
methods:{
tabChange(index){
this.ind = index;
}
}
})
</script>
</body>
</html>
tab栏高亮切换Vue
最新推荐文章于 2024-07-14 15:19:08 发布