<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tab {
width: 800px;
height: 40px;
margin: 10px auto;
}
.tab li {
text-align: center;
width: 200px;
line-height: 40px;
display: inline-block;
}
.box {
width: 800px;
height: 750px;
margin: auto;
}
.box li {
width: 800px;
height: 750px;
display: none;
}
.box li img {
width: 100%;
height: 100%;
}
.active{
background-color: pink;
}
.tive{
display: block !important;
}
</style>
</head>
<body>
<div id='myApp'>
<ul class="tab">
<li v-for="(time,index) in arr" :key="time.id" :class="[i == index ? 'active' : '' ]" @click="change(index)">{{time.TabControl}}</li>
</ul>
<ul class="box">
<li v-for="(time,index) in arr" :key="time.id" :class="[i == index ? 'tive' : '' ]">
<img :src="time.url" alt="">
</li>
</ul>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<script>
new Vue({
el: '#myApp',
data: {
i: 0,
arr: [
{ id: 1, TabControl: '第一个选项', url: 'https://uploadfile.bizhizu.cn/up/ef/df/dd/efdfddb79435265b24aad6714d952724.jpg' },
{ id: 2, TabControl: '第二个选项', url: 'https://www.succedu.com/d/file/2020/07/25/a1c0ca9e51.jpg' },
{ id: 3, TabControl: '第三个选项', url: 'https://img.zmtc.com/2019/0806/20190806060940425.jpg' },
{ id: 4, TabControl: '第四个选项', url: 'https://www.mlito.com/wp-content/uploads/2018/03/bf478dbc95.jpg' }
]
},
methods: {
change(index){ // 接收索引值
this.i = index // 把索引值赋值给i
}
},
})
</script>
</html>
vue选项卡
于 2023-01-10 18:02:11 首次发布