Vue实现简单的tab切换

最新推荐文章于 2024-08-02 11:00:31 发布

尼古拉斯玛卡巴卡

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量286

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52976120/article/details/128458388

版权

1、搭建静态页面

<ul>
	<li>
	    //标题
		<div></div>
		//内容
		<div></div>
	</li>
</ul>

2、分析数据

（1）li使用v-for遍历循环

<ul>
	<li v-for="(item,index) in list" :key="item.id" @click="title(index)">
		<div class="titleStyle">{{item.title}}</div>
		<div v-show="activeIndex==index" class="conStyle">{{item.content}}</div>
	</li>
</ul>

（2）在script中添加对象，设置标题与内容

list: [
		{
			id: 1,
			title: '题目一',
			content: '内容一',
		},
		{
			id: 2,
			title: '题目二',
			content: '内容二',
		},
		{
			id: 3,
			title: '题目三',
			content: '内容三',
		},
]

3、逻辑实现

给标题绑定点击事件，实现tab切换

methods: {
		title(index) {
			console.log(index)
			this.activeIndex = index
		},
}

4、完整代码

<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in list" :key="item.id" @click="title(index)">
					<div class="titleStyle">{{item.title}}</div>
					<div v-show="activeIndex==index" class="conStyle">{{item.content}}</div>
				</li>
			</ul>
		</div>
	</body>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				activeIndex: 0,
				list: [
					{
						id: 1,
						title: '题目一',
						content: '内容一',
					},
					{
						id: 2,
						title: '题目二',
						content: '内容二',
					},
					{
						id: 3,
						title: '题目三',
						content: '内容三',
					},
				],
			},
			methods: {
				title(index) {
					console.log(index)
					this.activeIndex = index
				},
			},
		})
	</script>