示例圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*隱藏內(nèi)容*/
.activeno {
display: none;
}
/*顯示內(nèi)容*/
.active {
display: block;
background-color: aqua;
}
#tab ul {
list-style: none;
}
/*清除浮動*/
#tab ul::after {
content: "";
display: block;
clear: both;
}
/*樣式*/
#tab ul li {
float: left;
width: 80px;
display: inline-block;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="app">
<div id="tab">
<ul>
<li :class="current==index?'active':''" @click="change(index)" v-for="(item,index) in list" :key="index"
v-cloak>{{item.title}}
</li>
</ul>
<div :class="current==index?'active':'activeno'" v-for="(item,index) in list" :key="index" v-cloak>
{{item.value}}
</div>
</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
current: 0,
list: [
{title: 1, value: "1的內(nèi)容"},
{title: 2, value: "2的內(nèi)容"},
{title: 3, value: "3的內(nèi)容"}
]
},
methods: {
change(index) {
this.current = index;
}
}
})
</script>
</body>
</html>
