vue 选项卡的不同实现方式
目录
-
- 1、@click="curIndex=i" 的方式
-
- 1.1、html 部分
- 1.2、JavaScript 部分
- 2、事件委托的方式
-
- 2.1、html 部分
- 2.2、JavaScript 部分
- 3、数据改造的方式
-
- 3.1、html 部分
- 3.2、JavaScript 部分
- 3.3、json 部分
- 5、css 部分（方式1和方式2）
- 6、css 部分（方式3）
- 7、css 部分的区别
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">li>
ul>
<div v-for="(item,i) in TAB_DATA" v-text="item.children" :class="{content:true,active:i==curIndex}">div>
div>
div>
1.2、JavaScript 部分
注意
使用之前先引入 vue.js 。
vue 安装命令
let TAB_DATA = [
{
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}">li>
ul>
<div v-for="(item,i) in TAB_DATA" v-text="item.children" :class="{content:true,active:i==curIndex}">div>
div>
div>
2.2、JavaScript 部分
注意
使用之前先引入 vue.js 。
vue 安装命令
let TAB_DATA = [
{
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)">li>
ul>
<div class="content" v-text="content">div>
div>
div>
3.2、JavaScript 部分
注意
1、使用之前先引入 vue.js 。
vue 安装命令
2、使用之前先引入 axios.mina.js 。
axios 安装命令
let TAB_DATA = [
{
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 这两个类。