<!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>
<script>
let tabs = [
{
title: '新闻',
list: [{
smallTitle: '新闻1'
},{
smallTitle: '新闻1'
},{
smallTitle: '新闻1'
},{
smallTitle: '新闻1'
}]
},
{
title: '娱乐',
list: [{
smallTitle: '娱乐1'
},{
smallTitle: '娱乐1'
},{
smallTitle: '娱乐1'
},{
smallTitle: '娱乐1'
}]
},
{
title: '体育',
list: [{
smallTitle: '体育1'
},{
smallTitle: '体育1'
},{
smallTitle: '体育1'
},{
smallTitle: '体育1'
}]
}
]
</script>
</head>
<body>
<div id="app">
<h2>只有一个展开</h2><br>
<div v-for="item,index in tabs">
<h2
:class="{yellow: item.show}"
@click="toggle(index)"
>
{{item.title}}
</h2>
<ul :style="{display: item.show ? 'block':'none'}">
<li v-for="option in item.list">
{{option.smallTitle}}
</li>
</ul>
</div>
</div>
<script>
// forEach 循环遍历数组中的每一项
// 语法：array.forEach(function(currentValue, index, arr), thisValue)
// 必需 可选 可选、传递给函数的值一般用 "this" 值。若参数为空，"undefined" 会传递给 "this" 值
tabs.forEach(item => item.show = false);
new Vue({
el:"#app",
data:{
tabs
},
methods:{
toggle(i){
this.tabs[i].show = !this.tabs[i].show;
}
}
})
</script>
</body>
</html>
Vue好友列表 可以多个展开
最新推荐文章于 2023-04-10 14:29:38 发布
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
