vue 选项卡练习

简单案例能实现切换效果

20220728131639

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>选项卡</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<style>
			.active {
				color: red;
			}

			.activatedOne {
				width: 200px;
				height: 200px;
				background: #ccc;
				border: 1px solid #999;
			}
		</style>
	</head>
	<body>
		<div id="root">
            <!-- 这个是显示导航栏 （这个先不动）-->
			<btn-item
				@click.native="handleItemChange(index)"
				v-for="(item,index) in btnList"
				:item="item"
				:class="{active: index===nowIndex}"
			></btn-item>

            <!-- 这个显示导航切换具体内容 -->
			<div-item
				v-for="(item,index) in divList"
				:item="item"
				class="activatedOne"
				v-show="nowIndex===index"
			></div-item>
		</div>

		<script>
            // 子组件一
			var btnItem = {
				props: ["item"],
				template: "<button>{{item}}</button>",
			};

            // 子组件二
			var divItem = {
				props: ["item"],
				template: "<div>{{item}}</div>",
			};

            // 父组件
			var vm = new Vue({
				el: "#root",
                // 注册组件
				components: {
					btnItem,
					divItem,
				},

                // 数据源
				data: {
					btnList: ["教育", "培训", "招生", "出国"],
					divList: [111, 222, 333, 444],
					nowIndex: 0,
				},

                // 方法函数点击切换
				methods: {
					handleItemChange(index) {
						this.nowIndex = index;
					},
				},
			});
		</script>
	</body>
</html>