vue 选项卡的不同实现方式

1、@click=“curIndex=i” 的方式 1.1、html 部分

<div id="app"> <div class="tabBox"> <ul class="tab"> <li v-for="(item,i) in TAB_DATA" v-html="item.sname" :class="{active:i==curIndex}" @click="curIndex=i"> id: 1, sname: '音乐', children: '音乐的内容' }, { id: 2, sname: '动漫', children: '动漫的内容' }, { id: 3, sname: '影视', children: '影视的内容' } ]; new Vue({ el: "#app", data: { TAB_DATA, curIndex: 0 }, }); 

2、事件委托的方式 2.1、html 部分

<div id="app"> <div class="tabBox">  <ul class="tab" @click="handle($event)">  <li :index="i" v-for="(item,i) in TAB_DATA" v-html="item.sname" :class="{active:i==curIndex}"> id: 1, sname: '音乐', children: '音乐的内容' }, { id: 2, sname: '动漫', children: '动漫的内容' }, { id: 3, sname: '影视', children: '影视的内容' } ]; new Vue({ el: "#app", data: { TAB_DATA, curIndex: 0 }, methods: { handle({ target }) { // { target } 函数的参数解构 let { tagName } = target; if (tagName === 'LI') { this.curIndex = parseInt(target.getAttribute('index')); } } } }); 

3、数据改造的方式 3.1、html 部分

<div id="app"> <div class="tabBox"> <ul class="tab"> <li v-for="(item,i) in TAB_DATA" v-html="item.sname" :class="{active:i==curIndex}" @click="handle(i,item.id)"> id: 1, sname: '音乐' }, { id: 2, sname: '动漫' }, { id: 3, sname: '影视' } ]; new Vue({ el: "#app", data: { TAB_DATA, curIndex: 0, content: null }, methods: { // 选项卡切换事件 handle(i, id) { if (this.curIndex === i) return false; this.getData(id); this.curIndex = i; }, // 请求数据 getData(){ axios.get('../json/tabContent.json').then(response => { return response.data; }).then(result => { let itemData = result.find(item => parseInt(item.id) == parseInt(id)); if (itemData) { this.content = itemData.content; return; } return Promise.reject(); }).catch(reason => { this.content = "查无此信息" }); } } }); 

3.3、json 部分

[ { "id": 1, "content": "音乐的内容" }, { "id": 2, "content": "动漫的内容" }, { "id": 3, "content": "影视的内容" } ] 

5、css 部分（方式1和方式2）

* { margin: 0; padding: 0; } .tabBox { box-sizing: border-box; width: 600px; margin: 20px auto; } .tab { display: flex; position: relative; top: 1px; } .tab li { padding: 0 20px; line-height: 35px; border: 1px solid #AAA; margin-right: 20px; cursor: pointer; list-style: none; } .tab li.active { background-color: #fff; border-bottom-color: #FFF; } .content { display: none; border: 1px solid #AAA; box-sizing: border-box; padding: 10px; height: 200px; } /* 同时拥有 active 类 */ .content.active { display: block; } 

6、css 部分（方式3）

* { margin: 0; padding: 0; } .tabBox { box-sizing: border-box; width: 600px; margin: 20px auto; } .tab { display: flex; position: relative; top: 1px; } .tab li { padding: 0 20px; line-height: 35px; border: 1px solid #AAA; margin-right: 20px; cursor: pointer; list-style: none; } .tab li.active { background-color: #fff; border-bottom-color: #FFF; } .content { border: 1px solid #AAA; box-sizing: border-box; padding: 10px; height: 200px; } 

7、css 部分的区别

方式1和方式2是一样的，方式1、方式2跟方式3的不同点是 .content 这个类，还有就是方式3没有 .content.active 这两个类。

8、演示