body {background-color: #c3c3c3}

Vue 嵌套选项卡 购物车

嵌套选项卡  
	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<script src="js/vue.js"></script>
			<title></title>
			<style>
				.contents {
					width: 200px;
					height: 200px;
					border: 1px solid red;
					font-size: 22px;
				}

				.active {
					background: green;
					color: white;
				}
			</style>
		</head>
		<body>
			<div id="app">
				<hr>
				<hr>
				<hr>
				<button v-for="bt in buttons" @click="cus(bt.component)"
					:class="{active : currbc==bt.component}">{{bt.name}}</button>


				<div class="contents">
					<component :is='currbc'></component>
				</div>
			</div>
			<template id="html">
				<div> html</div>
			</template>
			<template id="css">
				<div> css</div>
			</template>
			<template id="jsl">
				<div> jsl</div>
			</template>
			<template id="jsl2">
				<div> jsl2</div>
			</template>
			<template id="js">
				<div>
					<button v-for="btjs in buttonsjs" @click="cusjs(btjs .component)"
						:class="{active : currbcjs==btjs .component}">{{btjs .name}}</button>


					<div class="contentss">
						<component :is='currbcjs'></component>
					</div>

				</div>
			</template>

			<script>
				new Vue({
					el: "#app",
					data() {
						return {
							currbc: 'js',

							buttons: [{
									name: "Html",
									component: "Html"
								},
								{
									name: "css",
									component: "css"
								},
								{
									name: "js",
									component: "js"
								}
							]
						}
					},
					methods: {
						cus(i) {
							this.currbc = i
						}
					},
					components: {
						Html: {
							template: "#html"
						},
						css: {
							template: "#css"
						},
						js: {
							template: "#js",
							data() {
								return {
									currbcjs: 'jsl',

									buttonsjs: [{
											name: "jsl",
											component: "jsl"
										},
										{
											name: "jsl2",
											component: "jsl2"
										}
									]
								}

							},
							methods: {
								cusjs(i) {
									this.currbcjs = i
								}
							},
							components: {
								jsl: {
									template: "#jsl"
								},
								jsl2: {
									template: "#jsl2"
								},
							}
						},
					}
				})
			</script>
		</body>
	</html>
	<!-- 设置一个参数 先把参数存起来 然后 ，对存起来之后的数加减 -->

　　

posted @ 2023-11-30 10:50  最美胡萝卜  阅读(11)  评论(0)    收藏  举报
body {background-color: #c3c3c3}