vue基本知识:导航栏切换效果

Vue 378 0 2023-11-02

vue基本知识:导航栏切换效果

简单实现横向导航栏实现,点击哪项背景和字体颜色将变化,效果如下:

具体代码如下:

<template>
	<view>
		<view class="nav">
			<view class="item" :class="navIndex==index?'active':''" v-for="(item,index) in navArr" :key="item.id" @click="clickNav(index)">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navArr:[
					{id:1,title:'首页'},
					{id:2,title:'简介'},
					{id:3,title:'动态'},
					{id:4,title:'产品'},
					{id:5,title:'案例'},
				],
				navIndex:0
			};
		},
		methods:{
			clickNav(e){
				this.navIndex=e;
			}
		}
	}
</script>

<style lang="scss">
.nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	.item{
		flex: 1;
		line-height: 90rpx;
		background: #DDD;
		text-align: center;
		&.active{
			background: #00aaff;
			color: #fff;
		}
	}
}
</style>

上一篇:Naive UI的安装和使用

下一篇:vue前端打包部署到服务器IIS环境解决404找不到页面问题

讨论数量:0

请先登录再发表讨论。 2024-05-20

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链