uni-app标签页切换

效果图：

点击标题，即可切换下面的内容！

            

标题：

1. 利用一个for循环，把数组遍历出来。
2. 写一个动态的样式，isActive=index时，切换该样式。
3. 设置一个点击事件，传递一个index参数。

内容：

1. 用v-if控制是否显示。
2. 第一个isActive值为0，第二个isActive值为1...

<!-- 标题 -->
         <view class="navTitle" v-for="(item,index) in navList" :key="index" >
	        <view :class="{'active':isActive === index}" @click="checked(index)">
			    {{item.title}}
	        </view>
         </view>
<!-- 每个内容 -->
       <view class="nav_item" v-if="isActive==0">
			0
		</view>
		<view class="nav_item" v-if="isActive==1">
			1
		</view>
		<view class="nav_item" v-if="isActive==2">
			2
		</view>

 js：

1. 先定义一个isActive=0，让页面显示在第一个。
2. 点击事件中，传递的index参数就是我们isAcitve值。
3. v-if判断哪一个为真，为真的就显示，否则隐藏。

export default {
		data() {
			return {
				isActive: 0,
				navList:[
					{
						index: 0,
						title: '全部'
					},{
						index: 1,
						title: "临时展览"
					},{
						index: 2,
						title: "常设展览"
					}
				],
			}
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
		}
}