<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.yellow {
background: yellow;
}
#app ul {
display: none;
}
</style>
<script src="./src/vue.js"></script>
</head>
<body>
<div id="app">
<h2>好友列表-只有一个展开</h2><br>
<div
v-for="item,index in tabs"
>
<h2
@click="changeTabs(index)"
:class="{yellow : index === currentIndex}"
>{{item.title}}</h2>
<ul :style="addStyle(index)">
<li
v-for="value,index in item.sublist"
>{{value.subtitle}}</li>
</ul>
</div>
</div>
<script>
let data ={
tabs:[
{
title:"新闻",
sublist:[
{
subtitle:"新闻111"
},
{
subtitle:"新闻222"
},{
subtitle:"新闻333"
}
]
},{
title:"娱乐",
sublist:[
{
subtitle:"娱乐111"
},
{
subtitle:"娱乐222"
},{
subtitle:"娱乐333"
}
]
},{
title:"体育",
sublist:[
{
subtitle:"体育111"
},
{
subtitle:"体育222"
},{
subtitle:"体育333"
}
]
}
],
currentIndex:-1
}
new Vue({
el:"#app",
data:data,
methods:{
changeTabs(i){
this.currentIndex = this.currentIndex === i ? -1 : i;
},
addStyle(i){
return {display:this.currentIndex === i ? 'block' :'none'}
}
}
})
</script>
</body>
</html>
Vue好友列表 只有一个展开
最新推荐文章于 2020-12-20 18:15:32 发布