Vue好友列表只有一个展开

最新推荐文章于 2023-05-17 22:13:44 发布

fdgdfsdfds

最新推荐文章于 2023-05-17 22:13:44 发布

阅读量450

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/fdgdfsdfds/article/details/106501386

版权

<!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>

fdgdfsdfds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue好友列表只有一个展开

<!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 { displ
复制链接

扫一扫