<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 400px;
height: 400px;
margin: 50px auto;
}
ul {
list-style: none;
height: 40px;
background-color: hotpink;
}
ul>li {
width: 100px;
height: 40px;
float: left;
text-align: center;
line-height: 40px;
font-size: 22px;
color: #fff;
cursor: pointer;
}
ul>li.current {
background-color: blue;
}
.list>div {
height: 360px;
background-color: blue;
font-size: 120px;
color: #fff;
text-align: center;
line-height: 360px;
display: none;
}
.list>div.current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div id="box">
<ul>
<li @click="change(index)" v-for="(item,index) in arr" :class="currentIndex===index?'current':''">{{item}}</li>
</ul>
<div class="list">
<div v-for="(item,index) in arr" :class="currentIndex===index?'current':''">{{item}}</div>
</div>
</div>
</div>
<script src="../../vue.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
arr:['1','2','3','4'],
currentIndex:0
},
methods:{
change(i){
this.currentIndex=i
}
}
})
</script>
</body>
</html>
vue的tab切换
最新推荐文章于 2024-07-16 17:20:09 发布