嵌套选项卡
<!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> <!-- 设置一个参数 先把参数存起来 然后 ,对存起来之后的数加减 -->
标签:Vue,选项卡,name,jsl,component,购物车,template,jsl2,js From: https://www.cnblogs.com/nice2018/p/17866801.html