vue选项卡

Che1203

于 2021-06-01 20:16:27 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

文章标签： vue vue.js

本文链接：https://blog.csdn.net/chen120012/article/details/117451227

该博客主要介绍了利用Vue实现点击导航切换显示内容的功能，聚焦于前端交互效果的实现，借助Vue框架达成特定的页面交互需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//功能：点击导航切换显示内容
选项卡

//html
<div id="app">
			<ul>
				<li v-for="(item,index) in list" @click="change(index)" v-bind:class="{current:num==index}">{{item}}</li>
			</ul>
			<section>
				<div v-for="(val,index) in con"  @click="change(index)" v-show="num==index">{{val}}</div>
			</section>
		</div>

//js
		<script src="vue.js"></script>
		<script >
			var app=new Vue({
				el:"#app",
				data:{
					num:0,
					list:["我的","热门","购物","游戏"],
					con:["娱乐内容","热门内容","购物内容","游戏内容"]
				},
				methods:{
					change:function(a){
						this.num=a
					}
				}
			})
		</script>

//css
			*{
				margin: 0;
				padding: 0;
			}
			ul>li{
				list-style: none;
				width: 200px;
				line-height: 30px;
				text-align: center;
				float: left;
				border: 1px solid red;
			}
			ul{
				overflow: hidden;
				margin-bottom:20px
			}
			section>div{
				width: 800px;
				height: 200px;
				border: 1px solid black;
			}
			.current{
				background-color: orange;
			}