uniapp实现固定导航循环更改样式更改页面

最新推荐文章于 2024-06-03 14:37:26 发布

一颗前端子

最新推荐文章于 2024-06-03 14:37:26 发布

阅读量618

点赞数

分类专栏： uniapp 文章标签： html5 vue.js css

本文链接：https://blog.csdn.net/qq_43408070/article/details/111870312

版权

uniapp 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现效果如下：
在这里插入图片描述
点击某个盒子后更改蓝色字体并且只显示属于该数字的盒子

分析：
在这里插入图片描述

代码如下：

<template>
	<view class="content">
		<view style="display: flex;width: 100%;">
			<view style="width: 20%;text-align: center;" v-for="(i,index) in title" :key="index" @click="chooseid(index)" :class="{'cblue':idnum==index+1}">
				{{i.name}}
			</view>
		</view>
		<view v-show="idnum==1">
			1
		</view>
		<view v-show="idnum==2">
			2
		</view>
		<view v-show="idnum==3">
			3
		</view>
		<view v-show="idnum==4">
			4
		</view>
		<view v-show="idnum==5">
			5
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idnum:1,
				title:[{
					name:"数字1",
					id:1
				},
				{
					name:"数字2",
					id:2
				},
				{
					name:"数字3",
					id:3
				},
				{
					name:"数字4",
					id:4
				},
				{
					name:"数字5",
					id:5
				}]
				
			}
		},
		onLoad() {

		},
		methods: {
			chooseid(index){
				this.idnum=index+1;
				console.log(this.idnum)
				
			}
		}
	}
</script>

<style>
	.cblue{
		color: #007AFF;
	}
</style>