vue tab数组切换

1.图片切换效果

2.引入代码

<template>
	<div class="tab">
		<div class="content">
			<div style="margin: auto;width: 90%;display: flex;">
				<!--4个按钮-->
				<button :class="index == number ? 'btn1':'btn'" @click="tab(index)" v-for="(item ,index) in dataList"
					:key="index">{{item.option}}
				</button>
			</div>
			<!--4个div-->
			<div id="content1" v-show="number == index" v-for="(item ,index) in dataList1" :key="index">
				<span>{{item.option}}</span>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: "tab",
		data() {
			return {
				number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
				dataList: [{
						option: 'Java'
					},
					{
						option: 'C+'
					},
					{
						option: 'JavaScript'
					},
					{
						option: 'PHP'
					},
				],
				dataList1: [{
						option: 'Java'
					},
					{
						option: 'C+'
					},
					{
						option: 'JavaScript'
					},
					{
						option: 'PHP'
					},
				]
			}
		},
		methods: {
			//定义切换方法
			tab(index) {
				this.number = index;
				// console.log(index, this.number);
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 700px;
		margin: auto;

		/*按钮样式*/
		/*未选中时*/
		.btn {
			width: 150px;
			height: 40px;
			border: 0;
			border-radius: 5px;
			color: white;
			margin: 20px 3px;
			background-color: #35cc8f;
		}

		/*选中时*/
		.btn1 {
			width: 150px;
			height: 40px;
			border: 0;
			border-radius: 5px;
			color: white;
			margin: 20px 3px;
			background-color: #099941;
		}

		#content1,
		#content2,
		#content3,
		#content4 {
			background-color: #c1f8c9;
			height: 300px;
			font-size: 16px;
			line-height: 40px;
		}
	}
</style>