vue实现选项卡功能，相比原生js代码简洁许多
效果图
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width, initial-scale=1.0">
<title>Document</title>
<style>
#app ul li{
display: block;
height: 40px;
line-height: 40px;
width: 100px;
cursor: pointer;
text-align: center;
border: 1px solid black;
float: left;
font-weight: bold;
}
#app ul li.active{
background-color: aqua;
border-bottom: 3px black;
color: brown;
}
#app .tab div{
clear: both;
display: none;
}
#app .tab div.active{
display: block;
}
img{
height: 300px;
width: 450px;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<li :class="num==index?'active':''" v-for="(item,index) in list" @click="change(index)">{
{
item.title}}</li>
</ul>
<div :class="num==index?'active':''" v-for="(item,index) in list" @click="change(index)"><img :src="item.pathimg">{
{
item.pathimg}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
num:0,
list: [
{
id: 1,
title: "苹果",
pathimg: "pg.jpeg"
},
{
id: 2,
title: "梨子",
pathimg: "lizi.jpg"
},
{
id: 3,
title: "西瓜",
pathimg: "xg.jpg"
}
],
}
},
methods: {
change:function(index){
this.num = index
}
},
})
</script>
</body>
</html>
