- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title></title>
- <link rel="stylesheet" href="">
- <style>
- .red {
- background:red;
- }
- #app div {
- display: none;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <input
- v-for="item,i in tabData"
- type="button"
- v-bind:value="item.title"
- v-bind:class="{red: i===index}"
- v-on:click = "tabaHandle(i)"
- />
- <div
- v-bind:style="{display: j === index ?'block':'none'}"
- v-for="item,j in tabData"
- >
- <p v-for="option in item.list">{{option.subtitle}}</p>
- </div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- // 数据劫持, 转成 getter/setter
- /*
- 可控制 class
- v-bind:class="{class 名字: 表达式}"
- 表达式为 true 就添加 class, 为 false 就忽略
- 控制 style
- v-bind:style="{样式名: 样式值}"
- vue 中的事件
- 语法: v-on: 事件名 = '事件处理函数'
- 需要传参
- 语法: v-on: 事件名 = '事件处理函数 (参数)'
- */
- let tabData = [
- {
- title:"新闻",
- list: [
- {
- subtitle: '新闻栏目'
- },
- {
- subtitle: '新闻栏目'
- },
- {
- subtitle: '新闻栏目'
- }
- ]
- },
- {
- title:"娱乐",
- list: [
- {
- subtitle: '娱乐栏目'
- },
- {
- subtitle: '娱乐栏目'
- },
- {
- subtitle: '娱乐栏目'
- }
- ]
- },
- {
- title:"体育",
- list: [
- {
- subtitle: '赢了'
- },
- {
- subtitle: '赢了'
- },
- {
- subtitle: '赢了'
- }
- ]
- }
- ]
- let vm = new Vue({
- el: '#app',
- data: {
- tabData,
- index: 0 // 控制让哪一个面板显示的
- },
- methods: {
- tabaHandle(i) {
- this.index = i;
- }
- }
- })
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/17568/bc94075d87b1d61d35bafb9c41087397.html