uniapp小demo

 现在得需求就是：我点击哪个菜单，菜单背景颜色跟着改变，然后下面展示他的索引值。

提供思路

①：设置好样式

②：绑定动态class，:class="navIndex == index ? 'active' : ''"   

③：点击事件，点击时   this.navIndex = index;

代码实现

<template>
	<view class="main">
		<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 class="show">您现在选择得是第 {{ navIndex }} 个</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			navArr: [{ id: 1, title: '首页' }, { id: 2, title: '介绍' }, { id: 3, title: '教程' }, { id: 4, title: '组件' }],
			navIndex: 0
		};
	},
	onLoad() {},
	methods: {
		clickNav(index) {
			this.navIndex = index;
		}
	}
};
</script>

<style lang="scss">
.main {
	.nav {
		display: flex;
		justify-content: center;
		align-items: center;
		.item {
			flex: 1;
			line-height: 120rpx;
			background: #ccc;
			text-align: center;
			&.active {
				background: green;
			}
		}
	}
	.show {
		margin-top: 20rpx;
		text-align: center;
		color: #aa0000;
	}
	.MyButton{
		margin-top: 30rpx;
	}
}
</style>