<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡组件</title> <script src="vue.js"></script> <style> *{ margin: 0; padding: 0; } #nav ul{ list-style: none; } #nav ul li{ display: inline-block; width:100px; height: 50px; line-height: 50px; font-size: 20px; text-align: center; border:2px solid #ffff00; box-sizing: border-box; } .pink{ background-color: pink; } .blue{ background-color: #0086b3; } #div{ width:500px; height:300px; font-size: 30px; text-align: center; line-height: 300px; background-color: #718c00; } </style> </head> <body> <div id="app"> {{name}} <test></test> </div> <template id="tp1"> <div id="nav"> <ul> <li v-for="item in array" @click="choose(item)" :class='content===item?"pink":"blue"'>{{item}}</li> </ul> <div id="div">{{content}}</div> </div> </template> <script> //创建一个组件 var component=Vue.extend({ template:"#tp1", data:function () { return{ content:"北京", array:["北京","上海","杭州","广州","深圳"] } }, methods:{ choose:function (item) { this.content=item; } } }); //注册一个组件 Vue.component("test",component); new Vue({ el:"#app", data:{ name:"选项卡组件案例" } }); </script> </body> </html>
结果截图(点相应的标题,下面会出现不同的内容)