<!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>
<!-- 设置一个参数 先把参数存起来 然后 ，对存起来之后的数加减 -->